<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="UTF-8">
		<title>缓动函数速查表</title>
		<meta content="width=device-width" name="viewport">
		<script src="../js/jquery.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0
			}
			
			body {
				background: white;
				color: black;
				font-size: 16px
			}
			
			body,
			pre strong {
				font-family: "PT Sans", sans-serif
			}
			
			code {
				font-family: "PT Mono", monospace;
				font-size: 14px
			}
			
			a {
				outline: none
			}
			
			.centered {
				width: 899px;
				max-width: 96%;
				margin: 0 auto;
				position: relative
			}
			
			.about {
				padding: 20px 174px 5px 0;
				line-height: 1.3
			}
			
			.about p {
				margin-bottom: 5px
			}
			
			.easings {
				margin: 0 -30px 0 -10px;
				position: relative
			}
			
			.easings ul {
				display: inline-block;
				margin-right: 20px
			}
			
			.easings .part {
				position: relative
			}
			
			.easings .part ul {
				-webkit-transition: opacity 400ms;
				transition: opacity 400ms
			}
			
			.easings .part-title {
				position: absolute;
				top: -12px;
				right: 35px;
				width: 40px;
				color: #999;
				font-size: 14px;
				font-weight: normal;
				text-align: right
			}
			
			.easings.hightlight-part .part ul {
				opacity: 0.15
			}
			
			.easings.hightlight-part .part:hover ul {
				opacity: 1
			}
			
			.easing {
				list-style: none;
				display: inline-block;
				margin: 3px 5px;
				padding: 5px;
				position: relative
			}
			
			.easing.linear {
				position: absolute;
				top: 11px;
				right: 25px;
				z-index: 2
			}
			
			.easing.linear .easing-title {
				margin-bottom: -35px
			}
			
			.easing.easeOutElastic .easing-title {
				box-shadow: white 0 26px 8px -8px inset
			}
			
			.easing .button {
				margin: -5px;
				padding: 5px
			}
			
			.easing .easing-title {
				text-align: center;
				font-size: 15px;
				font-weight: normal;
				margin-bottom: -25px;
				position: relative;
				z-index: 2
			}
			
			.easing .graph {
				text-decoration: none;
				position: relative
			}
			
			.easing.is-clickable:hover,
			.easing.is-clickable:active {
				background: #f0f0f0;
				box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.5)
			}
			
			.easing.is-clickable:hover .button,
			.easing.is-clickable:active .button {
				background: white;
				-webkit-transition: box-shadow 200ms, -webkit-transform 200ms;
				transition: box-shadow 200ms, -webkit-transform 200ms;
				transition: transform 200ms, box-shadow 200ms;
				transition: transform 200ms, box-shadow 200ms, -webkit-transform 200ms
			}
			
			.easing.is-clickable:active .button {
				box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
				-webkit-transform: scale(0.9);
				transform: scale(0.9);
				-webkit-transition: none;
				transition: none
			}
			
			.graph svg {
				width: 124px;
				height: 140px;
				margin-bottom: -30px
			}
			
			.graph svg line {
				stroke: #bbb;
				stroke-width: 1px
			}
			
			.graph svg path {
				fill: transparent;
				fill: rgba(255, 255, 255, 0);
				stroke: black;
				stroke-width: 2px
			}
			
			.graph svg text {
				font-size: 12px;
				fill: #bbb
			}
			
			.graph {
				position: relative;
				display: inline-block
			}
			
			.graph .example {
				position: absolute;
				width: 21px;
				height: 12px;
				overflow: hidden;
				z-index: 10;
				background: #e40000;
				background: -webkit-linear-gradient(#fe0000, #d00000);
				background: linear-gradient(#fe0000, #d00000)
			}
			
			.graph .example .top,
			.graph .example .bottom {
				-webkit-transform: rotate(45deg);
				transform: rotate(45deg);
				background: white;
				position: absolute;
				left: -11px;
				width: 15px;
				height: 15px
			}
			
			.graph .example .top {
				top: -8px
			}
			
			.graph .example .bottom {
				top: 5px
			}
			
			.graph .dot {
				position: absolute;
				background: #ddd;
				width: 2px;
				height: 2px;
				border-radius: 2px
			}
			
			.easing .graph .example,
			.easing .graph .dot {
				opacity: 0;
				-webkit-transition: opacity 200ms;
				transition: opacity 200ms
			}
			
			.easing .graph .example {
				top: 94px;
				left: 122px
			}
			
			.easing .graph .dot {
				top: 99px;
				left: 1px
			}
			
			.easing:hover .graph .example,
			.easing:hover .graph .dot {
				opacity: 1
			}
			
			.easing:hover.is-tapped .example,
			.easing:hover.is-tapped .dot {
				opacity: 0
			}
			
			.easing .link {
				-webkit-tap-highlight-color: rgba(255, 255, 255, 0)
			}
			
			.howtos h2 {
				font-weight: normal;
				font-size: 25px;
				padding: 17px 0 5px 0
			}
			
			.howtos h3 {
				font-size: 25px
			}
			
			.easing-description .back {
				float: right;
				margin-top: 19px;
				color: red;
				text-decoration: none
			}
			
			.easing-description .back .text {
				display: inline-block;
				margin-left: 5px;
				border-bottom: 1px dotted
			}
			
			.easing-description .back:hover .text {
				border-bottom-style: solid
			}
			
			.easing-description .back:active {
				-webkit-transform: translateY(2px);
				transform: translateY(2px)
			}
			
			.easing-description h2 {
				font-weight: normal;
				font-size: 25px;
				margin-top: 15px
			}
			
			.easing-description h3 {
				font-size: 22px
			}
			
			.easing-description .graph {
				margin: -20px 0 -10px 0
			}
			
			.easing-description .graph .example {
				top: 124px;
				left: 161.2px
			}
			
			.easing-description .graph .dot {
				width: 4px;
				height: 4px;
				border-radius: 2px;
				top: 128px;
				left: 2px
			}
			
			.easing-description .graph .example,
			.easing-description .graph .dot {
				opacity: 0;
				-webkit-transition: opacity 200ms;
				transition: opacity 200ms
			}
			
			.easing-description .graph svg {
				width: 161.2px;
				height: 182px
			}
			
			.easing-description.exampled .graph .example,
			.easing-description.exampled .graph .dot {
				opacity: 1
			}
			
			.howtos p,
			.easing-description p {
				padding-bottom: 5px
			}
			
			.howtos p a,
			.easing-description p a {
				display: inline-block;
				color: black;
				text-decoration: none;
				border-bottom: 1px solid #bbb;
				line-height: 1;
				-webkit-transition: border-bottom-color 150ms;
				transition: border-bottom-color 150ms
			}
			
			.howtos p a:hover,
			.easing-description p a:hover {
				border-bottom-color: black
			}
			
			.howtos pre,
			.easing-description pre {
				padding: 5px 0 10px 0;
				font-size: 13px
			}
			
			.howtos pre strong,
			.easing-description pre strong {
				color: red;
				font-size: 14px;
				font-weight: normal;
				white-space: nowrap
			}
			
			.howtos h3,
			.easing-description h3 {
				font-weight: normal;
				padding: 7px 0 5px 0
			}
			
			.page-crop {
				overflow: hidden;
				margin: -10px 0 0 -10px;
				padding: 10px 0 0 10px
			}
			
			.easing-description {
				position: absolute;
				top: 0;
				left: 105%;
				width: 100%;
				display: none
			}
			
			.page-slider {
				position: relative
			}
			
			.page-animation .page-slider,
			.page-animation .easing.linear {
				-webkit-transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1);
				transition: all 600ms cubic-bezier(0.77, 0, 0.175, 1)
			}
			
			.easing-page .page-slider {
				-webkit-transform: translateX(-105%);
				transform: translateX(-105%)
			}
			
			.easing-page .easing.linear {
				-webkit-transform: translateY(-105px);
				transform: translateY(-105px)
			}
			
			.transform-3d .open-source .rotator {
				-webkit-transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
				transition: all 600ms cubic-bezier(0.455, 0.03, 0.515, 0.955)
			}
			
			.transform-3d .open-source .shadow {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				background: rgba(0, 0, 0, 0.1);
				opacity: 0
			}
			
			.transform-3d .open-source .text,
			.transform-3d .open-source .border {
				-webkit-transition-property: opacity;
				transition-property: opacity;
				-webkit-transition-delay: 250ms;
				transition-delay: 250ms
			}
			
			.transform-3d .open-source .translate {
				-webkit-transition-delay: 0;
				transition-delay: 0
			}
			
			.transform-3d .open-source.show .translate {
				-webkit-transition-delay: 400ms;
				transition-delay: 400ms
			}
			
			.transform-3d .open-source.show .text,
			.transform-3d .open-source.show .border {
				-webkit-transition-delay: 200ms;
				transition-delay: 200ms
			}
			
			.transform-3d .open-source.show .rotator {
				-webkit-transform: rotate3d(1, 1, 0, 180deg);
				transform: rotate3d(1, 1, 0, 180deg)
			}
			
			.transform-2d .open-source.show .text,
			.transform-2d .open-source.show .border {
				display: none
			}
			
			.transform-2d .open-source.show .rotator {
				-webkit-transform: rotate(180deg);
				transform: rotate(180deg)
			}
			
			html {
				position: relative;
				min-height: 100%
			}
			
			body {
				margin-bottom: 50px
			}
			
			footer {
				position: absolute;
				left: 0;
				bottom: 0;
				height: 50px;
				width: 100%
			}
			
			footer {
				text-align: right;
				padding-top: 10px;
				height: 40px
			}
			
			footer a {
				line-height: 40px;
				color: #888
			}
			
			footer a:hover {
				text-decoration: none
			}
			
			footer .author {
				float: left;
				padding-left: 27px;
				font-size: 13px;
				position: relative;
				-webkit-transition: color 400ms;
				transition: color 400ms
			}
			
			footer .author:hover {
				text-decoration: none;
				color: black
			}
			
			footer .author:hover .hover {
				top: 0
			}
			
			footer .mask {
				position: absolute;
				top: 9px;
				left: 0;
				overflow: hidden;
				background-color: #888
			}
			
			footer .hover {
				position: absolute;
				background: black;
				width: 100%;
				height: 100%;
				top: -100%;
				-webkit-transition: top 400ms cubic-bezier(0.77, 0, 0.175, 1);
				transition: top 400ms cubic-bezier(0.77, 0, 0.175, 1)
			}
			
			footer .image {
				width: 20px;
				height: 22px;
				background-size: 100% 100%;
				position: relative;
				z-index: 2
			}
			
			footer .star {
				display: none;
				opacity: 0
			}
			
			footer .star.is-enable {
				display: block;
				float: left;
				margin: 9px 0 0 30px
			}
			
			footer .star.is-show {
				opacity: 1;
				-webkit-transition: opacity 400ms;
				transition: opacity 400ms
			}
			
			footer li {
				font-size: 12px;
				font-family: "Trebuchet MS", sans-serif;
				list-style: none;
				display: inline-block;
				padding-left: 10px
			}
			
			footer select {
				position: relative;
				top: 9px
			}
			
			.rtl {
				direction: rtl
			}
			
			.rtl pre {
				direction: ltr
			}
			
			.rtl .easing.linear {
				right: auto;
				left: 25px
			}
			
			.rtl .easings {
				direction: ltr;
				left: 15px
			}
			
			.rtl .easings .part-title {
				right: auto;
				left: -20px
			}
			
			.rtl .about {
				padding-right: 0;
				padding-left: 174px
			}
			
			.rtl .easing-description .back {
				float: left
			}
			
			@media (min-width: 1150px) {
				.open-source.user-can-translate .translate {
					-webkit-transition-delay: 0;
					transition-delay: 0;
					opacity: 0.5
				}
				.open-source.user-can-translate.show .translate {
					opacity: 1
				}
			}
			
			@media all and (max-height: 768px) {
				.about {
					padding-top: 15px
				}
				.easing.linear {
					top: 6px
				}
			}
			
			@media all and (max-width: 899px) {
				.easings {
					text-align: center
				}
				.easings .part-title {
					position: static;
					top: auto;
					left: auto;
					width: auto;
					text-align: center;
					font-size: 12px;
					margin: -3px 0 -1px 0
				}
			}
			
			@media all and (max-width: 600px) {
				.centered {
					width: auto;
					max-width: 100%;
					padding: 0 10px
				}
				.about {
					padding-top: 10px
				}
				.easing {
					margin: 3px 0
				}
				.easing .easing-title {
					font-size: 13px
				}
				.easing .graph .example,
				.easing .graph .dot {
					display: none
				}
				pre {
					white-space: pre-wrap
				}
				
				footer .author {
					font-size: 12px
				}
			}
			
			@media all and (max-width: 481px) {
				.about {
					padding: 10px 0 5px 0
				}
				.easing.linear {
					display: none
				}
				.easings {
					margin: 0
				}
				.easings ul {
					margin-right: 0
				}
				.easings .easing {
					left: -2px
				}
				.howtos {
					padding: 0 10px
				}
				.graph svg {
					width: 105.4px;
					height: 119px
				}
				.howtos h2 {
					font-size: 23px
				}
				.howtos h3 {
					font-size: 23px
				}
				.page-crop {
					margin: 0 -10px;
					padding: 0
				}
				.easing-description {
					margin-top: -10px;
					padding: 0 10px;
					box-sizing: border-box
				}
				.easing-description .back {
					font-size: 14px
				}
				.easing-description h2 {
					font-size: 23px
				}
				.easing-description h3 {
					font-size: 20px
				}
			}
			
			@media all and (max-width: 430px) {
				footer .star.is-show {
					display: none
				}
			}
			
			@media all and (max-width: 332px) {
				.graph svg {
					width: 93px;
					height: 105px
				}
			}
		</style>
		
	</head>

	<body>
		<div class="centered">
			<div class="about">
				<p><strong>缓动函数</strong>指定动画效果在执行时的速度，使其看起来更加真实。</p>
				<p>现实物体照着一定节奏移动，并不是一开始就移动很快的。当我们打开抽屉时，首先会让它加速，然后慢下来。当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。</p>
				<p>本页可以在每次你需要时，帮助你找到想要的缓动函数。</p>
				<div class="easing linear">
					<h3 class="easing-title">linear</h3>
					<div class="graph">
						<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
							<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
							<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
							<path d="M0,60 L1.2,59.4 2.4,58.8 3.6,58.2 4.8,57.6 6.0,57.0 7.2,56.4 8.4,55.8 9.6,55.2 10.8,54.6 12.0,54.0 13.2,53.4 14.4,52.8 15.6,52.2 16.8,51.6 18.0,51.0 19.2,50.4 20.4,49.8 21.6,49.2 22.8,48.6 24.0,48.0 25.2,47.4 26.4,46.8 27.6,46.2 28.8,45.6 30.0,45.0 31.2,44.4 32.4,43.8 33.6,43.2 34.8,42.6 36.0,42.0 37.2,41.4 38.4,40.8 39.6,40.2 40.8,39.6 42.0,39.0 43.2,38.4 44.4,37.8 45.6,37.2 46.8,36.6 48.0,36.0 49.2,35.4 50.4,34.8 51.6,34.2 52.8,33.6 54.0,33.0 55.2,32.4 56.4,31.8 57.6,31.2 58.8,30.6 60.0,30.0 61.2,29.4 62.4,28.8 63.6,28.2 64.8,27.6 66.0,27.0 67.2,26.4 68.4,25.8 69.6,25.2 70.8,24.6 72.0,24.0 73.2,23.4 74.4,22.8 75.6,22.2 76.8,21.6 78.0,21.0 79.2,20.4 80.4,19.8 81.6,19.2 82.8,18.6 84.0,18.0 85.2,17.4 86.4,16.8 87.6,16.2 88.8,15.6 90.0,15.0 91.2,14.4 92.4,13.8 93.6,13.2 94.8,12.6 96.0,12.0 97.2,11.4 98.4,10.8 99.6,10.2 100.8,9.6 102.0,9.0 103.2,8.4 104.4,7.8 105.6,7.2 106.8,6.6 108.0,6.0 109.2,5.4 110.4,4.8 111.6,4.2 112.8,3.6 114.0,3.0 115.2,2.4 116.4,1.8 117.6,1.2 118.8,0.6 120.0,0.0"></path>
						</svg>
					</div>
				</div>
			</div>
			<div class="page-crop">
				<div class="page-slider">
					<div class="easings">
						<div class="part css">
							<h2 class="part-title" title="可放在任意位置">css+js</h2>
							<ul>
								<li class="easing is-clickable easeInSine">
									<div class="button">
										<h3 class="easing-title">easeInSine</h3>
										<a class="graph link" href="#easeInSine">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.7 8.4,59.6 9.6,59.5 10.8,59.4 12.0,59.3 13.2,59.1 14.4,58.9 15.6,58.8 16.8,58.6 18.0,58.3 19.2,58.1 20.4,57.9 21.6,57.6 22.8,57.3 24.0,57.1 25.2,56.8 26.4,56.5 27.6,56.1 28.8,55.8 30.0,55.4 31.2,55.1 32.4,54.7 33.6,54.3 34.8,53.9 36.0,53.5 37.2,53.0 38.4,52.6 39.6,52.1 40.8,51.6 42.0,51.2 43.2,50.7 44.4,50.1 45.6,49.6 46.8,49.1 48.0,48.5 49.2,48.0 50.4,47.4 51.6,46.8 52.8,46.2 54.0,45.6 55.2,45.0 56.4,44.4 57.6,43.7 58.8,43.1 60.0,42.4 61.2,41.8 62.4,41.1 63.6,40.4 64.8,39.7 66.0,39.0 67.2,38.2 68.4,37.5 69.6,36.8 70.8,36.0 72.0,35.3 73.2,34.5 74.4,33.7 75.6,32.9 76.8,32.1 78.0,31.3 79.2,30.5 80.4,29.7 81.6,28.9 82.8,28.1 84.0,27.2 85.2,26.4 86.4,25.5 87.6,24.7 88.8,23.8 90.0,23.0 91.2,22.1 92.4,21.2 93.6,20.3 94.8,19.4 96.0,18.5 97.2,17.6 98.4,16.7 99.6,15.8 100.8,14.9 102.0,14.0 103.2,13.1 104.4,12.2 105.6,11.2 106.8,10.3 108.0,9.4 109.2,8.5 110.4,7.5 111.6,6.6 112.8,5.6 114.0,4.7 115.2,3.8 116.4,2.8 117.6,1.9 118.8,0.9 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutSine">
									<div class="button">
										<h3 class="easing-title">easeOutSine</h3>
										<a class="graph link" href="#easeOutSine">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,59.1 2.4,58.1 3.6,57.2 4.8,56.2 6.0,55.3 7.2,54.4 8.4,53.4 9.6,52.5 10.8,51.5 12.0,50.6 13.2,49.7 14.4,48.8 15.6,47.8 16.8,46.9 18.0,46.0 19.2,45.1 20.4,44.2 21.6,43.3 22.8,42.4 24.0,41.5 25.2,40.6 26.4,39.7 27.6,38.8 28.8,37.9 30.0,37.0 31.2,36.2 32.4,35.3 33.6,34.5 34.8,33.6 36.0,32.8 37.2,31.9 38.4,31.1 39.6,30.3 40.8,29.5 42.0,28.7 43.2,27.9 44.4,27.1 45.6,26.3 46.8,25.5 48.0,24.7 49.2,24.0 50.4,23.2 51.6,22.5 52.8,21.8 54.0,21.0 55.2,20.3 56.4,19.6 57.6,18.9 58.8,18.2 60.0,17.6 61.2,16.9 62.4,16.3 63.6,15.6 64.8,15.0 66.0,14.4 67.2,13.8 68.4,13.2 69.6,12.6 70.8,12.0 72.0,11.5 73.2,10.9 74.4,10.4 75.6,9.9 76.8,9.3 78.0,8.8 79.2,8.4 80.4,7.9 81.6,7.4 82.8,7.0 84.0,6.5 85.2,6.1 86.4,5.7 87.6,5.3 88.8,4.9 90.0,4.6 91.2,4.2 92.4,3.9 93.6,3.5 94.8,3.2 96.0,2.9 97.2,2.7 98.4,2.4 99.6,2.1 100.8,1.9 102.0,1.7 103.2,1.4 104.4,1.2 105.6,1.1 106.8,0.9 108.0,0.7 109.2,0.6 110.4,0.5 111.6,0.4 112.8,0.3 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutSine">
									<div class="button">
										<h3 class="easing-title">easeInOutSine</h3>
										<a class="graph link" href="#easeInOutSine">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,59.9 3.6,59.9 4.8,59.8 6.0,59.6 7.2,59.5 8.4,59.3 9.6,59.1 10.8,58.8 12.0,58.5 13.2,58.2 14.4,57.9 15.6,57.5 16.8,57.1 18.0,56.7 19.2,56.3 20.4,55.8 21.6,55.3 22.8,54.8 24.0,54.3 25.2,53.7 26.4,53.1 27.6,52.5 28.8,51.9 30.0,51.2 31.2,50.5 32.4,49.8 33.6,49.1 34.8,48.4 36.0,47.6 37.2,46.9 38.4,46.1 39.6,45.3 40.8,44.5 42.0,43.6 43.2,42.8 44.4,41.9 45.6,41.0 46.8,40.2 48.0,39.3 49.2,38.4 50.4,37.5 51.6,36.5 52.8,35.6 54.0,34.7 55.2,33.8 56.4,32.8 57.6,31.9 58.8,30.9 60.0,30.0 61.2,29.1 62.4,28.1 63.6,27.2 64.8,26.2 66.0,25.3 67.2,24.4 68.4,23.5 69.6,22.5 70.8,21.6 72.0,20.7 73.2,19.8 74.4,19.0 75.6,18.1 76.8,17.2 78.0,16.4 79.2,15.5 80.4,14.7 81.6,13.9 82.8,13.1 84.0,12.4 85.2,11.6 86.4,10.9 87.6,10.2 88.8,9.5 90.0,8.8 91.2,8.1 92.4,7.5 93.6,6.9 94.8,6.3 96.0,5.7 97.2,5.2 98.4,4.7 99.6,4.2 100.8,3.7 102.0,3.3 103.2,2.9 104.4,2.5 105.6,2.1 106.8,1.8 108.0,1.5 109.2,1.2 110.4,0.9 111.6,0.7 112.8,0.5 114.0,0.4 115.2,0.2 116.4,0.1 117.6,0.1 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInQuad">
									<div class="button">
										<h3 class="easing-title">easeInQuad</h3>
										<a class="graph link" href="#easeInQuad">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.7 19.2,58.5 20.4,58.3 21.6,58.1 22.8,57.8 24.0,57.6 25.2,57.4 26.4,57.1 27.6,56.8 28.8,56.5 30.0,56.3 31.2,55.9 32.4,55.6 33.6,55.3 34.8,55.0 36.0,54.6 37.2,54.2 38.4,53.9 39.6,53.5 40.8,53.1 42.0,52.7 43.2,52.2 44.4,51.8 45.6,51.3 46.8,50.9 48.0,50.4 49.2,49.9 50.4,49.4 51.6,48.9 52.8,48.4 54.0,47.9 55.2,47.3 56.4,46.7 57.6,46.2 58.8,45.6 60.0,45.0 61.2,44.4 62.4,43.8 63.6,43.1 64.8,42.5 66.0,41.8 67.2,41.2 68.4,40.5 69.6,39.8 70.8,39.1 72.0,38.4 73.2,37.7 74.4,36.9 75.6,36.2 76.8,35.4 78.0,34.7 79.2,33.9 80.4,33.1 81.6,32.3 82.8,31.4 84.0,30.6 85.2,29.8 86.4,28.9 87.6,28.0 88.8,27.1 90.0,26.3 91.2,25.3 92.4,24.4 93.6,23.5 94.8,22.6 96.0,21.6 97.2,20.6 98.4,19.7 99.6,18.7 100.8,17.7 102.0,16.7 103.2,15.6 104.4,14.6 105.6,13.5 106.8,12.5 108.0,11.4 109.2,10.3 110.4,9.2 111.6,8.1 112.8,7.0 114.0,5.9 115.2,4.7 116.4,3.5 117.6,2.4 118.8,1.2 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutQuad">
									<div class="button">
										<h3 class="easing-title">easeOutQuad</h3>
										<a class="graph link" href="#easeOutQuad">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,58.8 2.4,57.6 3.6,56.5 4.8,55.3 6.0,54.2 7.2,53.0 8.4,51.9 9.6,50.8 10.8,49.7 12.0,48.6 13.2,47.5 14.4,46.5 15.6,45.4 16.8,44.4 18.0,43.3 19.2,42.3 20.4,41.3 21.6,40.3 22.8,39.4 24.0,38.4 25.2,37.4 26.4,36.5 27.6,35.6 28.8,34.7 30.0,33.8 31.2,32.9 32.4,32.0 33.6,31.1 34.8,30.2 36.0,29.4 37.2,28.6 38.4,27.7 39.6,26.9 40.8,26.1 42.0,25.4 43.2,24.6 44.4,23.8 45.6,23.1 46.8,22.3 48.0,21.6 49.2,20.9 50.4,20.2 51.6,19.5 52.8,18.8 54.0,18.2 55.2,17.5 56.4,16.9 57.6,16.2 58.8,15.6 60.0,15.0 61.2,14.4 62.4,13.8 63.6,13.3 64.8,12.7 66.0,12.1 67.2,11.6 68.4,11.1 69.6,10.6 70.8,10.1 72.0,9.6 73.2,9.1 74.4,8.7 75.6,8.2 76.8,7.8 78.0,7.3 79.2,6.9 80.4,6.5 81.6,6.1 82.8,5.8 84.0,5.4 85.2,5.0 86.4,4.7 87.6,4.4 88.8,4.1 90.0,3.8 91.2,3.5 92.4,3.2 93.6,2.9 94.8,2.6 96.0,2.4 97.2,2.2 98.4,1.9 99.6,1.7 100.8,1.5 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutQuad">
									<div class="button">
										<h3 class="easing-title">easeInOutQuad</h3>
										<a class="graph link" href="#easeInOutQuad">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.8 6.0,59.7 7.2,59.6 8.4,59.4 9.6,59.2 10.8,59.0 12.0,58.8 13.2,58.5 14.4,58.3 15.6,58.0 16.8,57.6 18.0,57.3 19.2,56.9 20.4,56.5 21.6,56.1 22.8,55.7 24.0,55.2 25.2,54.7 26.4,54.2 27.6,53.7 28.8,53.1 30.0,52.5 31.2,51.9 32.4,51.3 33.6,50.6 34.8,49.9 36.0,49.2 37.2,48.5 38.4,47.7 39.6,46.9 40.8,46.1 42.0,45.3 43.2,44.4 44.4,43.6 45.6,42.7 46.8,41.7 48.0,40.8 49.2,39.8 50.4,38.8 51.6,37.8 52.8,36.8 54.0,35.7 55.2,34.6 56.4,33.5 57.6,32.4 58.8,31.2 60.0,30.0 61.2,28.8 62.4,27.6 63.6,26.5 64.8,25.4 66.0,24.3 67.2,23.2 68.4,22.2 69.6,21.2 70.8,20.2 72.0,19.2 73.2,18.3 74.4,17.3 75.6,16.4 76.8,15.6 78.0,14.7 79.2,13.9 80.4,13.1 81.6,12.3 82.8,11.5 84.0,10.8 85.2,10.1 86.4,9.4 87.6,8.7 88.8,8.1 90.0,7.5 91.2,6.9 92.4,6.3 93.6,5.8 94.8,5.3 96.0,4.8 97.2,4.3 98.4,3.9 99.6,3.5 100.8,3.1 102.0,2.7 103.2,2.4 104.4,2.0 105.6,1.7 106.8,1.5 108.0,1.2 109.2,1.0 110.4,0.8 111.6,0.6 112.8,0.4 114.0,0.3 115.2,0.2 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInCubic">
									<div class="button">
										<h3 class="easing-title">easeInCubic</h3>
										<a class="graph link" href="#easeInCubic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.7 21.6,59.7 22.8,59.6 24.0,59.5 25.2,59.4 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.7 34.8,58.5 36.0,58.4 37.2,58.2 38.4,58.0 39.6,57.8 40.8,57.6 42.0,57.4 43.2,57.2 44.4,57.0 45.6,56.7 46.8,56.4 48.0,56.2 49.2,55.9 50.4,55.6 51.6,55.2 52.8,54.9 54.0,54.5 55.2,54.2 56.4,53.8 57.6,53.4 58.8,52.9 60.0,52.5 61.2,52.0 62.4,51.6 63.6,51.1 64.8,50.6 66.0,50.0 67.2,49.5 68.4,48.9 69.6,48.3 70.8,47.7 72.0,47.0 73.2,46.4 74.4,45.7 75.6,45.0 76.8,44.3 78.0,43.5 79.2,42.8 80.4,42.0 81.6,41.1 82.8,40.3 84.0,39.4 85.2,38.5 86.4,37.6 87.6,36.7 88.8,35.7 90.0,34.7 91.2,33.7 92.4,32.6 93.6,31.5 94.8,30.4 96.0,29.3 97.2,28.1 98.4,26.9 99.6,25.7 100.8,24.4 102.0,23.2 103.2,21.8 104.4,20.5 105.6,19.1 106.8,17.7 108.0,16.3 109.2,14.8 110.4,13.3 111.6,11.7 112.8,10.2 114.0,8.6 115.2,6.9 116.4,5.2 117.6,3.5 118.8,1.8 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutCubic">
									<div class="button">
										<h3 class="easing-title">easeOutCubic</h3>
										<a class="graph link" href="#easeOutCubic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,58.2 2.4,56.5 3.6,54.8 4.8,53.1 6.0,51.4 7.2,49.8 8.4,48.3 9.6,46.7 10.8,45.2 12.0,43.7 13.2,42.3 14.4,40.9 15.6,39.5 16.8,38.2 18.0,36.8 19.2,35.6 20.4,34.3 21.6,33.1 22.8,31.9 24.0,30.7 25.2,29.6 26.4,28.5 27.6,27.4 28.8,26.3 30.0,25.3 31.2,24.3 32.4,23.3 33.6,22.4 34.8,21.5 36.0,20.6 37.2,19.7 38.4,18.9 39.6,18.0 40.8,17.2 42.0,16.5 43.2,15.7 44.4,15.0 45.6,14.3 46.8,13.6 48.0,13.0 49.2,12.3 50.4,11.7 51.6,11.1 52.8,10.5 54.0,10.0 55.2,9.4 56.4,8.9 57.6,8.4 58.8,8.0 60.0,7.5 61.2,7.1 62.4,6.6 63.6,6.2 64.8,5.8 66.0,5.5 67.2,5.1 68.4,4.8 69.6,4.4 70.8,4.1 72.0,3.8 73.2,3.6 74.4,3.3 75.6,3.0 76.8,2.8 78.0,2.6 79.2,2.4 80.4,2.2 81.6,2.0 82.8,1.8 84.0,1.6 85.2,1.5 86.4,1.3 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.6 96.0,0.5 97.2,0.4 98.4,0.3 99.6,0.3 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutCubic">
									<div class="button">
										<h3 class="easing-title">easeInOutCubic</h3>
										<a class="graph link" href="#easeInOutCubic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.8 12.0,59.8 13.2,59.7 14.4,59.6 15.6,59.5 16.8,59.3 18.0,59.2 19.2,59.0 20.4,58.8 21.6,58.6 22.8,58.4 24.0,58.1 25.2,57.8 26.4,57.4 27.6,57.1 28.8,56.7 30.0,56.3 31.2,55.8 32.4,55.3 33.6,54.7 34.8,54.1 36.0,53.5 37.2,52.9 38.4,52.1 39.6,51.4 40.8,50.6 42.0,49.7 43.2,48.8 44.4,47.8 45.6,46.8 46.8,45.8 48.0,44.6 49.2,43.5 50.4,42.2 51.6,40.9 52.8,39.6 54.0,38.1 55.2,36.6 56.4,35.1 57.6,33.5 58.8,31.8 60.0,30.0 61.2,28.2 62.4,26.5 63.6,24.9 64.8,23.4 66.0,21.9 67.2,20.4 68.4,19.1 69.6,17.8 70.8,16.5 72.0,15.4 73.2,14.2 74.4,13.2 75.6,12.2 76.8,11.2 78.0,10.3 79.2,9.4 80.4,8.6 81.6,7.9 82.8,7.1 84.0,6.5 85.2,5.9 86.4,5.3 87.6,4.7 88.8,4.2 90.0,3.8 91.2,3.3 92.4,2.9 93.6,2.6 94.8,2.2 96.0,1.9 97.2,1.6 98.4,1.4 99.6,1.2 100.8,1.0 102.0,0.8 103.2,0.7 104.4,0.5 105.6,0.4 106.8,0.3 108.0,0.2 109.2,0.2 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInQuart">
									<div class="button">
										<h3 class="easing-title">easeInQuart</h3>
										<a class="graph link" href="#easeInQuart">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,59.9 21.6,59.9 22.8,59.9 24.0,59.9 25.2,59.9 26.4,59.9 27.6,59.8 28.8,59.8 30.0,59.8 31.2,59.7 32.4,59.7 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.4 38.4,59.4 39.6,59.3 40.8,59.2 42.0,59.1 43.2,59.0 44.4,58.9 45.6,58.7 46.8,58.6 48.0,58.5 49.2,58.3 50.4,58.1 51.6,57.9 52.8,57.8 54.0,57.5 55.2,57.3 56.4,57.1 57.6,56.8 58.8,56.5 60.0,56.3 61.2,55.9 62.4,55.6 63.6,55.3 64.8,54.9 66.0,54.5 67.2,54.1 68.4,53.7 69.6,53.2 70.8,52.7 72.0,52.2 73.2,51.7 74.4,51.1 75.6,50.5 76.8,49.9 78.0,49.3 79.2,48.6 80.4,47.9 81.6,47.2 82.8,46.4 84.0,45.6 85.2,44.8 86.4,43.9 87.6,43.0 88.8,42.0 90.0,41.0 91.2,40.0 92.4,38.9 93.6,37.8 94.8,36.6 96.0,35.4 97.2,34.2 98.4,32.9 99.6,31.5 100.8,30.1 102.0,28.7 103.2,27.2 104.4,25.6 105.6,24.0 106.8,22.4 108.0,20.6 109.2,18.9 110.4,17.0 111.6,15.1 112.8,13.2 114.0,11.1 115.2,9.0 116.4,6.9 117.6,4.7 118.8,2.4 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutQuart">
									<div class="button">
										<h3 class="easing-title">easeOutQuart</h3>
										<a class="graph link" href="#easeOutQuart">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,57.6 2.4,55.3 3.6,53.1 4.8,51.0 6.0,48.9 7.2,46.8 8.4,44.9 9.6,43.0 10.8,41.1 12.0,39.4 13.2,37.6 14.4,36.0 15.6,34.4 16.8,32.8 18.0,31.3 19.2,29.9 20.4,28.5 21.6,27.1 22.8,25.8 24.0,24.6 25.2,23.4 26.4,22.2 27.6,21.1 28.8,20.0 30.0,19.0 31.2,18.0 32.4,17.0 33.6,16.1 34.8,15.2 36.0,14.4 37.2,13.6 38.4,12.8 39.6,12.1 40.8,11.4 42.0,10.7 43.2,10.1 44.4,9.5 45.6,8.9 46.8,8.3 48.0,7.8 49.2,7.3 50.4,6.8 51.6,6.3 52.8,5.9 54.0,5.5 55.2,5.1 56.4,4.7 57.6,4.4 58.8,4.1 60.0,3.8 61.2,3.5 62.4,3.2 63.6,2.9 64.8,2.7 66.0,2.5 67.2,2.2 68.4,2.1 69.6,1.9 70.8,1.7 72.0,1.5 73.2,1.4 74.4,1.3 75.6,1.1 76.8,1.0 78.0,0.9 79.2,0.8 80.4,0.7 81.6,0.6 82.8,0.6 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.3 88.8,0.3 90.0,0.2 91.2,0.2 92.4,0.2 93.6,0.1 94.8,0.1 96.0,0.1 97.2,0.1 98.4,0.1 99.6,0.1 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutQuart">
									<div class="button">
										<h3 class="easing-title">easeInOutQuart</h3>
										<a class="graph link" href="#easeInOutQuart">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.6 21.6,59.5 22.8,59.4 24.0,59.2 25.2,59.1 26.4,58.9 27.6,58.7 28.8,58.4 30.0,58.1 31.2,57.8 32.4,57.4 33.6,57.0 34.8,56.6 36.0,56.1 37.2,55.6 38.4,55.0 39.6,54.3 40.8,53.6 42.0,52.8 43.2,51.9 44.4,51.0 45.6,50.0 46.8,48.9 48.0,47.7 49.2,46.4 50.4,45.1 51.6,43.6 52.8,42.0 54.0,40.3 55.2,38.5 56.4,36.6 57.6,34.5 58.8,32.3 60.0,30.0 61.2,27.7 62.4,25.5 63.6,23.4 64.8,21.5 66.0,19.7 67.2,18.0 68.4,16.4 69.6,14.9 70.8,13.6 72.0,12.3 73.2,11.1 74.4,10.0 75.6,9.0 76.8,8.1 78.0,7.2 79.2,6.4 80.4,5.7 81.6,5.0 82.8,4.4 84.0,3.9 85.2,3.4 86.4,3.0 87.6,2.6 88.8,2.2 90.0,1.9 91.2,1.6 92.4,1.3 93.6,1.1 94.8,0.9 96.0,0.8 97.2,0.6 98.4,0.5 99.6,0.4 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInQuint">
									<div class="button">
										<h3 class="easing-title">easeInQuint</h3>
										<a class="graph link" href="#easeInQuint">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,60.0 21.6,60.0 22.8,60.0 24.0,60.0 25.2,60.0 26.4,60.0 27.6,60.0 28.8,60.0 30.0,59.9 31.2,59.9 32.4,59.9 33.6,59.9 34.8,59.9 36.0,59.9 37.2,59.8 38.4,59.8 39.6,59.8 40.8,59.7 42.0,59.7 43.2,59.6 44.4,59.6 45.6,59.5 46.8,59.5 48.0,59.4 49.2,59.3 50.4,59.2 51.6,59.1 52.8,59.0 54.0,58.9 55.2,58.8 56.4,58.6 57.6,58.5 58.8,58.3 60.0,58.1 61.2,57.9 62.4,57.7 63.6,57.5 64.8,57.2 66.0,57.0 67.2,56.7 68.4,56.4 69.6,56.1 70.8,55.7 72.0,55.3 73.2,54.9 74.4,54.5 75.6,54.0 76.8,53.6 78.0,53.0 79.2,52.5 80.4,51.9 81.6,51.3 82.8,50.6 84.0,49.9 85.2,49.2 86.4,48.4 87.6,47.6 88.8,46.7 90.0,45.8 91.2,44.8 92.4,43.8 93.6,42.7 94.8,41.5 96.0,40.3 97.2,39.1 98.4,37.8 99.6,36.4 100.8,34.9 102.0,33.4 103.2,31.8 104.4,30.1 105.6,28.3 106.8,26.5 108.0,24.6 109.2,22.6 110.4,20.5 111.6,18.3 112.8,16.0 114.0,13.6 115.2,11.1 116.4,8.5 117.6,5.8 118.8,2.9 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutQuint">
									<div class="button">
										<h3 class="easing-title">easeOutQuint</h3>
										<a class="graph link" href="#easeOutQuint">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,57.1 2.4,54.2 3.6,51.5 4.8,48.9 6.0,46.4 7.2,44.0 8.4,41.7 9.6,39.5 10.8,37.4 12.0,35.4 13.2,33.5 14.4,31.7 15.6,29.9 16.8,28.2 18.0,26.6 19.2,25.1 20.4,23.6 21.6,22.2 22.8,20.9 24.0,19.7 25.2,18.5 26.4,17.3 27.6,16.2 28.8,15.2 30.0,14.2 31.2,13.3 32.4,12.4 33.6,11.6 34.8,10.8 36.0,10.1 37.2,9.4 38.4,8.7 39.6,8.1 40.8,7.5 42.0,7.0 43.2,6.4 44.4,6.0 45.6,5.5 46.8,5.1 48.0,4.7 49.2,4.3 50.4,3.9 51.6,3.6 52.8,3.3 54.0,3.0 55.2,2.8 56.4,2.5 57.6,2.3 58.8,2.1 60.0,1.9 61.2,1.7 62.4,1.5 63.6,1.4 64.8,1.2 66.0,1.1 67.2,1.0 68.4,0.9 69.6,0.8 70.8,0.7 72.0,0.6 73.2,0.5 74.4,0.5 75.6,0.4 76.8,0.4 78.0,0.3 79.2,0.3 80.4,0.2 81.6,0.2 82.8,0.2 84.0,0.1 85.2,0.1 86.4,0.1 87.6,0.1 88.8,0.1 90.0,0.1 91.2,0.0 92.4,0.0 93.6,0.0 94.8,0.0 96.0,0.0 97.2,0.0 98.4,0.0 99.6,0.0 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutQuint">
									<div class="button">
										<h3 class="easing-title">easeInOutQuint</h3>
										<a class="graph link" href="#easeInOutQuint">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,59.9 18.0,59.9 19.2,59.9 20.4,59.9 21.6,59.8 22.8,59.8 24.0,59.7 25.2,59.6 26.4,59.5 27.6,59.4 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.6 33.6,58.3 34.8,58.0 36.0,57.7 37.2,57.3 38.4,56.8 39.6,56.2 40.8,55.6 42.0,55.0 43.2,54.2 44.4,53.3 45.6,52.4 46.8,51.3 48.0,50.2 49.2,48.9 50.4,47.5 51.6,45.9 52.8,44.2 54.0,42.3 55.2,40.2 56.4,38.0 57.6,35.5 58.8,32.9 60.0,30.0 61.2,27.1 62.4,24.5 63.6,22.0 64.8,19.8 66.0,17.7 67.2,15.8 68.4,14.1 69.6,12.5 70.8,11.1 72.0,9.8 73.2,8.7 74.4,7.6 75.6,6.7 76.8,5.8 78.0,5.0 79.2,4.4 80.4,3.8 81.6,3.2 82.8,2.7 84.0,2.3 85.2,2.0 86.4,1.7 87.6,1.4 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.6 93.6,0.5 94.8,0.4 96.0,0.3 97.2,0.2 98.4,0.2 99.6,0.1 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInExpo">
									<div class="button">
										<h3 class="easing-title">easeInExpo</h3>
										<a class="graph link" href="#easeInExpo">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,59.9 2.4,59.9 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.8 21.6,59.8 22.8,59.8 24.0,59.8 25.2,59.7 26.4,59.7 27.6,59.7 28.8,59.7 30.0,59.7 31.2,59.6 32.4,59.6 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.5 38.4,59.5 39.6,59.4 40.8,59.4 42.0,59.3 43.2,59.3 44.4,59.2 45.6,59.2 46.8,59.1 48.0,59.1 49.2,59.0 50.4,58.9 51.6,58.8 52.8,58.8 54.0,58.7 55.2,58.6 56.4,58.5 57.6,58.4 58.8,58.3 60.0,58.1 61.2,58.0 62.4,57.8 63.6,57.7 64.8,57.5 66.0,57.3 67.2,57.2 68.4,57.0 69.6,56.7 70.8,56.5 72.0,56.3 73.2,56.0 74.4,55.7 75.6,55.4 76.8,55.1 78.0,54.7 79.2,54.3 80.4,53.9 81.6,53.5 82.8,53.0 84.0,52.5 85.2,52.0 86.4,51.4 87.6,50.8 88.8,50.1 90.0,49.4 91.2,48.6 92.4,47.8 93.6,46.9 94.8,46.0 96.0,45.0 97.2,43.9 98.4,42.8 99.6,41.5 100.8,40.2 102.0,38.8 103.2,37.3 104.4,35.6 105.6,33.9 106.8,32.0 108.0,30.0 109.2,27.8 110.4,25.5 111.6,23.1 112.8,20.4 114.0,17.6 115.2,14.5 116.4,11.3 117.6,7.8 118.8,4.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutExpo">
									<div class="button">
										<h3 class="easing-title">easeOutExpo</h3>
										<a class="graph link" href="#easeOutExpo">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,56.0 2.4,52.2 3.6,48.7 4.8,45.5 6.0,42.4 7.2,39.6 8.4,36.9 9.6,34.5 10.8,32.2 12.0,30.0 13.2,28.0 14.4,26.1 15.6,24.4 16.8,22.7 18.0,21.2 19.2,19.8 20.4,18.5 21.6,17.2 22.8,16.1 24.0,15.0 25.2,14.0 26.4,13.1 27.6,12.2 28.8,11.4 30.0,10.6 31.2,9.9 32.4,9.2 33.6,8.6 34.8,8.0 36.0,7.5 37.2,7.0 38.4,6.5 39.6,6.1 40.8,5.7 42.0,5.3 43.2,4.9 44.4,4.6 45.6,4.3 46.8,4.0 48.0,3.8 49.2,3.5 50.4,3.3 51.6,3.0 52.8,2.8 54.0,2.7 55.2,2.5 56.4,2.3 57.6,2.2 58.8,2.0 60.0,1.9 61.2,1.7 62.4,1.6 63.6,1.5 64.8,1.4 66.0,1.3 67.2,1.2 68.4,1.2 69.6,1.1 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.8 75.6,0.8 76.8,0.7 78.0,0.7 79.2,0.6 80.4,0.6 81.6,0.5 82.8,0.5 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.4 88.8,0.4 90.0,0.3 91.2,0.3 92.4,0.3 93.6,0.3 94.8,0.3 96.0,0.2 97.2,0.2 98.4,0.2 99.6,0.2 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.1 117.6,0.1 118.8,0.1 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutExpo">
									<div class="button">
										<h3 class="easing-title">easeInOutExpo</h3>
										<a class="graph link" href="#easeInOutExpo">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.8 15.6,59.8 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.7 21.6,59.6 22.8,59.6 24.0,59.5 25.2,59.5 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.6 34.8,58.4 36.0,58.1 37.2,57.8 38.4,57.5 39.6,57.2 40.8,56.7 42.0,56.3 43.2,55.7 44.4,55.1 45.6,54.3 46.8,53.5 48.0,52.5 49.2,51.4 50.4,50.1 51.6,48.6 52.8,46.9 54.0,45.0 55.2,42.8 56.4,40.2 57.6,37.3 58.8,33.9 60.0,30.0 61.2,26.1 62.4,22.7 63.6,19.8 64.8,17.2 66.0,15.0 67.2,13.1 68.4,11.4 69.6,9.9 70.8,8.6 72.0,7.5 73.2,6.5 74.4,5.7 75.6,4.9 76.8,4.3 78.0,3.8 79.2,3.3 80.4,2.8 81.6,2.5 82.8,2.2 84.0,1.9 85.2,1.6 86.4,1.4 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.5 96.0,0.5 97.2,0.4 98.4,0.4 99.6,0.3 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.2 105.6,0.2 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInCirc">
									<div class="button">
										<h3 class="easing-title">easeInCirc</h3>
										<a class="graph link" href="#easeInCirc">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.8 10.8,59.8 12.0,59.7 13.2,59.6 14.4,59.6 15.6,59.5 16.8,59.4 18.0,59.3 19.2,59.2 20.4,59.1 21.6,59.0 22.8,58.9 24.0,58.8 25.2,58.7 26.4,58.5 27.6,58.4 28.8,58.2 30.0,58.1 31.2,57.9 32.4,57.8 33.6,57.6 34.8,57.4 36.0,57.2 37.2,57.0 38.4,56.8 39.6,56.6 40.8,56.4 42.0,56.2 43.2,56.0 44.4,55.7 45.6,55.5 46.8,55.2 48.0,55.0 49.2,54.7 50.4,54.5 51.6,54.2 52.8,53.9 54.0,53.6 55.2,53.3 56.4,53.0 57.6,52.6 58.8,52.3 60.0,52.0 61.2,51.6 62.4,51.2 63.6,50.9 64.8,50.5 66.0,50.1 67.2,49.7 68.4,49.3 69.6,48.9 70.8,48.4 72.0,48.0 73.2,47.5 74.4,47.1 75.6,46.6 76.8,46.1 78.0,45.6 79.2,45.1 80.4,44.5 81.6,44.0 82.8,43.4 84.0,42.8 85.2,42.3 86.4,41.6 87.6,41.0 88.8,40.4 90.0,39.7 91.2,39.0 92.4,38.3 93.6,37.5 94.8,36.8 96.0,36.0 97.2,35.2 98.4,34.3 99.6,33.5 100.8,32.6 102.0,31.6 103.2,30.6 104.4,29.6 105.6,28.5 106.8,27.4 108.0,26.2 109.2,24.9 110.4,23.5 111.6,22.1 112.8,20.5 114.0,18.7 115.2,16.8 116.4,14.6 117.6,11.9 118.8,8.5 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutCirc">
									<div class="button">
										<h3 class="easing-title">easeOutCirc</h3>
										<a class="graph link" href="#easeOutCirc">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,51.5 2.4,48.1 3.6,45.4 4.8,43.2 6.0,41.3 7.2,39.5 8.4,37.9 9.6,36.5 10.8,35.1 12.0,33.8 13.2,32.6 14.4,31.5 15.6,30.4 16.8,29.4 18.0,28.4 19.2,27.4 20.4,26.5 21.6,25.7 22.8,24.8 24.0,24.0 25.2,23.2 26.4,22.5 27.6,21.7 28.8,21.0 30.0,20.3 31.2,19.6 32.4,19.0 33.6,18.4 34.8,17.7 36.0,17.2 37.2,16.6 38.4,16.0 39.6,15.5 40.8,14.9 42.0,14.4 43.2,13.9 44.4,13.4 45.6,12.9 46.8,12.5 48.0,12.0 49.2,11.6 50.4,11.1 51.6,10.7 52.8,10.3 54.0,9.9 55.2,9.5 56.4,9.1 57.6,8.8 58.8,8.4 60.0,8.0 61.2,7.7 62.4,7.4 63.6,7.0 64.8,6.7 66.0,6.4 67.2,6.1 68.4,5.8 69.6,5.5 70.8,5.3 72.0,5.0 73.2,4.8 74.4,4.5 75.6,4.3 76.8,4.0 78.0,3.8 79.2,3.6 80.4,3.4 81.6,3.2 82.8,3.0 84.0,2.8 85.2,2.6 86.4,2.4 87.6,2.2 88.8,2.1 90.0,1.9 91.2,1.8 92.4,1.6 93.6,1.5 94.8,1.3 96.0,1.2 97.2,1.1 98.4,1.0 99.6,0.9 100.8,0.8 102.0,0.7 103.2,0.6 104.4,0.5 105.6,0.4 106.8,0.4 108.0,0.3 109.2,0.2 110.4,0.2 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutCirc">
									<div class="button">
										<h3 class="easing-title">easeInOutCirc</h3>
										<a class="graph link" href="#easeInOutCirc">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.6 19.2,58.4 20.4,58.2 21.6,58.0 22.8,57.7 24.0,57.5 25.2,57.2 26.4,56.9 27.6,56.6 28.8,56.3 30.0,56.0 31.2,55.6 32.4,55.2 33.6,54.9 34.8,54.4 36.0,54.0 37.2,53.5 38.4,53.1 39.6,52.5 40.8,52.0 42.0,51.4 43.2,50.8 44.4,50.2 45.6,49.5 46.8,48.8 48.0,48.0 49.2,47.2 50.4,46.3 51.6,45.3 52.8,44.2 54.0,43.1 55.2,41.8 56.4,40.2 57.6,38.4 58.8,36.0 60.0,30.0 61.2,24.0 62.4,21.6 63.6,19.8 64.8,18.2 66.0,16.9 67.2,15.8 68.4,14.7 69.6,13.7 70.8,12.8 72.0,12.0 73.2,11.2 74.4,10.5 75.6,9.8 76.8,9.2 78.0,8.6 79.2,8.0 80.4,7.5 81.6,6.9 82.8,6.5 84.0,6.0 85.2,5.6 86.4,5.1 87.6,4.8 88.8,4.4 90.0,4.0 91.2,3.7 92.4,3.4 93.6,3.1 94.8,2.8 96.0,2.5 97.2,2.3 98.4,2.0 99.6,1.8 100.8,1.6 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInBack">
									<div class="button">
										<h3 class="easing-title">easeInBack</h3>
										<a class="graph link" href="#easeInBack">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.1 4.8,60.2 6.0,60.2 7.2,60.3 8.4,60.4 9.6,60.6 10.8,60.7 12.0,60.9 13.2,61.0 14.4,61.2 15.6,61.4 16.8,61.6 18.0,61.8 19.2,61.9 20.4,62.2 21.6,62.4 22.8,62.6 24.0,62.8 25.2,63.0 26.4,63.2 27.6,63.4 28.8,63.6 30.0,63.8 31.2,64.1 32.4,64.3 33.6,64.4 34.8,64.6 36.0,64.8 37.2,65.0 38.4,65.1 39.6,65.3 40.8,65.4 42.0,65.6 43.2,65.7 44.4,65.8 45.6,65.8 46.8,65.9 48.0,66.0 49.2,66.0 50.4,66.0 51.6,66.0 52.8,66.0 54.0,65.9 55.2,65.8 56.4,65.7 57.6,65.6 58.8,65.4 60.0,65.3 61.2,65.1 62.4,64.8 63.6,64.5 64.8,64.2 66.0,63.9 67.2,63.6 68.4,63.2 69.6,62.7 70.8,62.2 72.0,61.7 73.2,61.2 74.4,60.6 75.6,60.0 76.8,59.3 78.0,58.6 79.2,57.9 80.4,57.1 81.6,56.2 82.8,55.4 84.0,54.4 85.2,53.5 86.4,52.4 87.6,51.3 88.8,50.2 90.0,49.0 91.2,47.8 92.4,46.5 93.6,45.2 94.8,43.8 96.0,42.3 97.2,40.8 98.4,39.3 99.6,37.6 100.8,36.0 102.0,34.2 103.2,32.4 104.4,30.5 105.6,28.6 106.8,26.6 108.0,24.5 109.2,22.4 110.4,20.2 111.6,17.9 112.8,15.6 114.0,13.2 115.2,10.7 116.4,8.1 117.6,5.5 118.8,2.8 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutBack">
									<div class="button">
										<h3 class="easing-title">easeOutBack</h3>
										<a class="graph link" href="#easeOutBack">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,57.2 2.4,54.5 3.6,51.9 4.8,49.3 6.0,46.8 7.2,44.4 8.4,42.1 9.6,39.8 10.8,37.6 12.0,35.5 13.2,33.4 14.4,31.4 15.6,29.5 16.8,27.6 18.0,25.8 19.2,24.0 20.4,22.4 21.6,20.7 22.8,19.2 24.0,17.7 25.2,16.2 26.4,14.8 27.6,13.5 28.8,12.2 30.0,11.0 31.2,9.8 32.4,8.7 33.6,7.6 34.8,6.5 36.0,5.6 37.2,4.6 38.4,3.8 39.6,2.9 40.8,2.1 42.0,1.4 43.2,0.7 44.4,0.0 45.6,-0.6 46.8,-1.2 48.0,-1.7 49.2,-2.2 50.4,-2.7 51.6,-3.2 52.8,-3.6 54.0,-3.9 55.2,-4.2 56.4,-4.5 57.6,-4.8 58.8,-5.1 60.0,-5.3 61.2,-5.4 62.4,-5.6 63.6,-5.7 64.8,-5.8 66.0,-5.9 67.2,-6.0 68.4,-6.0 69.6,-6.0 70.8,-6.0 72.0,-6.0 73.2,-5.9 74.4,-5.8 75.6,-5.8 76.8,-5.7 78.0,-5.6 79.2,-5.4 80.4,-5.3 81.6,-5.1 82.8,-5.0 84.0,-4.8 85.2,-4.6 86.4,-4.4 87.6,-4.3 88.8,-4.1 90.0,-3.8 91.2,-3.6 92.4,-3.4 93.6,-3.2 94.8,-3.0 96.0,-2.8 97.2,-2.6 98.4,-2.4 99.6,-2.2 100.8,-1.9 102.0,-1.8 103.2,-1.6 104.4,-1.4 105.6,-1.2 106.8,-1.0 108.0,-0.9 109.2,-0.7 110.4,-0.6 111.6,-0.4 112.8,-0.3 114.0,-0.2 115.2,-0.2 116.4,-0.1 117.6,-0.0 118.8,-0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutBack">
									<div class="button">
										<h3 class="easing-title">easeInOutBack</h3>
										<a class="graph link" href="#easeInOutBack">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.1 3.6,60.3 4.8,60.4 6.0,60.7 7.2,60.9 8.4,61.2 9.6,61.6 10.8,61.9 12.0,62.3 13.2,62.6 14.4,63.0 15.6,63.4 16.8,63.7 18.0,64.1 19.2,64.4 20.4,64.8 21.6,65.1 22.8,65.3 24.0,65.6 25.2,65.7 26.4,65.9 27.6,66.0 28.8,66.0 30.0,66.0 31.2,65.9 32.4,65.7 33.6,65.5 34.8,65.1 36.0,64.7 37.2,64.2 38.4,63.6 39.6,62.9 40.8,62.1 42.0,61.2 43.2,60.1 44.4,58.9 45.6,57.6 46.8,56.2 48.0,54.6 49.2,52.9 50.4,51.0 51.6,49.0 52.8,46.8 54.0,44.4 55.2,41.9 56.4,39.2 57.6,36.3 58.8,33.3 60.0,30.0 61.2,26.7 62.4,23.7 63.6,20.8 64.8,18.1 66.0,15.6 67.2,13.2 68.4,11.0 69.6,9.0 70.8,7.1 72.0,5.4 73.2,3.8 74.4,2.4 75.6,1.1 76.8,-0.1 78.0,-1.2 79.2,-2.1 80.4,-2.9 81.6,-3.6 82.8,-4.2 84.0,-4.7 85.2,-5.1 86.4,-5.5 87.6,-5.7 88.8,-5.9 90.0,-6.0 91.2,-6.0 92.4,-6.0 93.6,-5.9 94.8,-5.7 96.0,-5.6 97.2,-5.3 98.4,-5.1 99.6,-4.8 100.8,-4.4 102.0,-4.1 103.2,-3.7 104.4,-3.4 105.6,-3.0 106.8,-2.6 108.0,-2.3 109.2,-1.9 110.4,-1.6 111.6,-1.2 112.8,-0.9 114.0,-0.7 115.2,-0.4 116.4,-0.3 117.6,-0.1 118.8,-0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
						</div>
						<div class="part js">
							<h2 class="part-title" title="只能在JavaScript中被使用">js</h2>
							<ul>
								<li class="easing is-clickable easeInElastic">
									<div class="button">
										<h3 class="easing-title">easeInElastic</h3>
										<a class="graph link" href="#easeInElastic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.9 18.0,59.9 19.2,59.9 20.4,60.0 21.6,60.0 22.8,60.1 24.0,60.1 25.2,60.2 26.4,60.2 27.6,60.3 28.8,60.3 30.0,60.3 31.2,60.3 32.4,60.3 33.6,60.3 34.8,60.3 36.0,60.2 37.2,60.2 38.4,60.1 39.6,59.9 40.8,59.8 42.0,59.7 43.2,59.5 44.4,59.4 45.6,59.3 46.8,59.1 48.0,59.1 49.2,59.0 50.4,59.0 51.6,59.1 52.8,59.2 54.0,59.3 55.2,59.6 56.4,59.8 57.6,60.2 58.8,60.5 60.0,60.9 61.2,61.3 62.4,61.7 63.6,62.1 64.8,62.4 66.0,62.7 67.2,62.8 68.4,62.8 69.6,62.6 70.8,62.3 72.0,61.9 73.2,61.2 74.4,60.5 75.6,59.5 76.8,58.5 78.0,57.3 79.2,56.2 80.4,55.1 81.6,54.0 82.8,53.2 84.0,52.5 85.2,52.1 86.4,52.1 87.6,52.5 88.8,53.4 90.0,54.7 91.2,56.5 92.4,58.7 93.6,61.4 94.8,64.3 96.0,67.5 97.2,70.8 98.4,73.9 99.6,76.9 100.8,79.4 102.0,81.2 103.2,82.2 104.4,82.3 105.6,81.1 106.8,78.7 108.0,75.0 109.2,69.9 110.4,63.6 111.6,56.1 112.8,47.8 114.0,38.8 115.2,29.6 116.4,20.6 117.6,12.3 118.8,5.2 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutElastic">
									<div class="button">
										<h3 class="easing-title">easeOutElastic</h3>
										<a class="graph link" href="#easeOutElastic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,54.8 2.4,47.7 3.6,39.4 4.8,30.4 6.0,21.2 7.2,12.2 8.4,3.9 9.6,-3.6 10.8,-9.9 12.0,-15.0 13.2,-18.7 14.4,-21.1 15.6,-22.3 16.8,-22.2 18.0,-21.2 19.2,-19.4 20.4,-16.9 21.6,-13.9 22.8,-10.8 24.0,-7.5 25.2,-4.3 26.4,-1.4 27.6,1.3 28.8,3.5 30.0,5.3 31.2,6.6 32.4,7.5 33.6,7.9 34.8,7.9 36.0,7.5 37.2,6.8 38.4,6.0 39.6,4.9 40.8,3.8 42.0,2.7 43.2,1.5 44.4,0.5 45.6,-0.5 46.8,-1.2 48.0,-1.9 49.2,-2.3 50.4,-2.6 51.6,-2.8 52.8,-2.8 54.0,-2.7 55.2,-2.4 56.4,-2.1 57.6,-1.7 58.8,-1.3 60.0,-0.9 61.2,-0.5 62.4,-0.2 63.6,0.2 64.8,0.4 66.0,0.7 67.2,0.8 68.4,0.9 69.6,1.0 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.7 75.6,0.6 76.8,0.5 78.0,0.3 79.2,0.2 80.4,0.1 81.6,-0.1 82.8,-0.2 84.0,-0.2 85.2,-0.3 86.4,-0.3 87.6,-0.3 88.8,-0.3 90.0,-0.3 91.2,-0.3 92.4,-0.3 93.6,-0.2 94.8,-0.2 96.0,-0.1 97.2,-0.1 98.4,-0.0 99.6,0.0 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,-0.0 118.8,-0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutElastic">
									<div class="button">
										<h3 class="easing-title">easeInOutElastic</h3>
										<a class="graph link" href="#easeInOutElastic">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.1 15.6,60.1 16.8,60.2 18.0,60.2 19.2,60.3 20.4,60.3 21.6,60.3 22.8,60.3 24.0,60.2 25.2,60.1 26.4,60.0 27.6,59.8 28.8,59.5 30.0,59.3 31.2,59.0 32.4,58.8 33.6,58.6 34.8,58.5 36.0,58.6 37.2,58.8 38.4,59.2 39.6,59.9 40.8,60.8 42.0,61.9 43.2,63.1 44.4,64.4 45.6,65.6 46.8,66.5 48.0,67.0 49.2,67.0 50.4,66.1 51.6,64.3 52.8,61.4 54.0,57.4 55.2,52.4 56.4,46.8 57.6,40.7 58.8,34.9 60.0,30.0 61.2,25.1 62.4,19.3 63.6,13.2 64.8,7.6 66.0,2.6 67.2,-1.4 68.4,-4.3 69.6,-6.1 70.8,-7.0 72.0,-7.0 73.2,-6.5 74.4,-5.6 75.6,-4.4 76.8,-3.1 78.0,-1.9 79.2,-0.8 80.4,0.1 81.6,0.8 82.8,1.2 84.0,1.4 85.2,1.5 86.4,1.4 87.6,1.2 88.8,1.0 90.0,0.7 91.2,0.5 92.4,0.2 93.6,0.0 94.8,-0.1 96.0,-0.2 97.2,-0.3 98.4,-0.3 99.6,-0.3 100.8,-0.3 102.0,-0.2 103.2,-0.2 104.4,-0.1 105.6,-0.1 106.8,-0.0 108.0,0.0 109.2,0.0 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
							<ul>
								<li class="easing is-clickable easeInBounce">
									<div class="button">
										<h3 class="easing-title">easeInBounce</h3>
										<a class="graph link" href="#easeInBounce">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,59.6 2.4,59.4 3.6,59.2 4.8,59.1 6.0,59.1 7.2,59.2 8.4,59.3 9.6,59.6 10.8,60.0 12.0,59.3 13.2,58.6 14.4,58.0 15.6,57.5 16.8,57.0 18.0,56.7 19.2,56.5 20.4,56.3 21.6,56.3 22.8,56.3 24.0,56.4 25.2,56.6 26.4,56.9 27.6,57.3 28.8,57.8 30.0,58.4 31.2,59.0 32.4,59.8 33.6,58.8 34.8,57.3 36.0,55.8 37.2,54.5 38.4,53.2 39.6,52.0 40.8,51.0 42.0,50.0 43.2,49.1 44.4,48.2 45.6,47.5 46.8,46.9 48.0,46.3 49.2,45.9 50.4,45.5 51.6,45.3 52.8,45.1 54.0,45.0 55.2,45.0 56.4,45.1 57.6,45.3 58.8,45.6 60.0,45.9 61.2,46.4 62.4,46.9 63.6,47.6 64.8,48.3 66.0,49.1 67.2,50.0 68.4,51.0 69.6,52.1 70.8,53.3 72.0,54.6 73.2,56.0 74.4,57.4 75.6,59.0 76.8,58.8 78.0,55.6 79.2,52.5 80.4,49.4 81.6,46.5 82.8,43.6 84.0,40.8 85.2,38.2 86.4,35.6 87.6,33.1 88.8,30.7 90.0,28.4 91.2,26.1 92.4,24.0 93.6,22.0 94.8,20.0 96.0,18.1 97.2,16.4 98.4,14.7 99.6,13.1 100.8,11.6 102.0,10.2 103.2,8.9 104.4,7.7 105.6,6.5 106.8,5.5 108.0,4.5 109.2,3.7 110.4,2.9 111.6,2.2 112.8,1.6 114.0,1.1 115.2,0.7 116.4,0.4 117.6,0.2 118.8,0.0 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeOutBounce">
									<div class="button">
										<h3 class="easing-title">easeOutBounce</h3>
										<a class="graph link" href="#easeOutBounce">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,60.0 2.4,59.8 3.6,59.6 4.8,59.3 6.0,58.9 7.2,58.4 8.4,57.8 9.6,57.1 10.8,56.3 12.0,55.5 13.2,54.5 14.4,53.5 15.6,52.3 16.8,51.1 18.0,49.8 19.2,48.4 20.4,46.9 21.6,45.3 22.8,43.6 24.0,41.8 25.2,40.0 26.4,38.0 27.6,36.0 28.8,33.9 30.0,31.6 31.2,29.3 32.4,26.9 33.6,24.4 34.8,21.8 36.0,19.2 37.2,16.4 38.4,13.5 39.6,10.6 40.8,7.5 42.0,4.4 43.2,1.2 44.4,1.0 45.6,2.6 46.8,4.0 48.0,5.4 49.2,6.7 50.4,7.9 51.6,9.0 52.8,10.0 54.0,10.9 55.2,11.7 56.4,12.4 57.6,13.1 58.8,13.6 60.0,14.1 61.2,14.4 62.4,14.7 63.6,14.9 64.8,15.0 66.0,15.0 67.2,14.9 68.4,14.7 69.6,14.5 70.8,14.1 72.0,13.7 73.2,13.1 74.4,12.5 75.6,11.8 76.8,10.9 78.0,10.0 79.2,9.0 80.4,8.0 81.6,6.8 82.8,5.5 84.0,4.2 85.2,2.7 86.4,1.2 87.6,0.2 88.8,1.0 90.0,1.6 91.2,2.2 92.4,2.7 93.6,3.1 94.8,3.4 96.0,3.6 97.2,3.7 98.4,3.7 99.6,3.7 100.8,3.5 102.0,3.3 103.2,3.0 104.4,2.5 105.6,2.0 106.8,1.4 108.0,0.7 109.2,0.0 110.4,0.4 111.6,0.7 112.8,0.8 114.0,0.9 115.2,0.9 116.4,0.8 117.6,0.6 118.8,0.4 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
								<li class="easing is-clickable easeInOutBounce">
									<div class="button">
										<h3 class="easing-title">easeInOutBounce</h3>
										<a class="graph link" href="#easeInOutBounce">
											<div class="example">
												<div class="top"></div>
												<div class="bottom"></div>
											</div>
											<div class="dot"></div>
											<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
												<line x1="0" x2="120" y1="0" y2="0"></line>
												<line x1="0" x2="120" y1="60" y2="60"></line>
												<path d="M0,60 L1.2,59.7 2.4,59.5 3.6,59.6 4.8,59.8 6.0,59.6 7.2,59.0 8.4,58.5 9.6,58.2 10.8,58.1 12.0,58.2 13.2,58.5 14.4,58.9 15.6,59.5 16.8,59.4 18.0,57.9 19.2,56.6 20.4,55.5 21.6,54.5 22.8,53.8 24.0,53.2 25.2,52.8 26.4,52.5 27.6,52.5 28.8,52.6 30.0,53.0 31.2,53.5 32.4,54.2 33.6,55.0 34.8,56.1 36.0,57.3 37.2,58.7 38.4,59.4 39.6,56.2 40.8,53.2 42.0,50.4 43.2,47.8 44.4,45.3 45.6,43.1 46.8,41.0 48.0,39.1 49.2,37.4 50.4,35.8 51.6,34.4 52.8,33.3 54.0,32.3 55.2,31.5 56.4,30.8 57.6,30.4 58.8,30.1 60.0,30.0 61.2,29.9 62.4,29.6 63.6,29.2 64.8,28.5 66.0,27.7 67.2,26.7 68.4,25.6 69.6,24.2 70.8,22.6 72.0,20.9 73.2,19.0 74.4,16.9 75.6,14.7 76.8,12.2 78.0,9.6 79.2,6.8 80.4,3.8 81.6,0.6 82.8,1.3 84.0,2.7 85.2,3.9 86.4,5.0 87.6,5.8 88.8,6.5 90.0,7.0 91.2,7.4 92.4,7.5 93.6,7.5 94.8,7.2 96.0,6.8 97.2,6.2 98.4,5.5 99.6,4.5 100.8,3.4 102.0,2.1 103.2,0.6 104.4,0.5 105.6,1.1 106.8,1.5 108.0,1.8 109.2,1.9 110.4,1.8 111.6,1.5 112.8,1.0 114.0,0.4 115.2,0.2 116.4,0.4 117.6,0.5 118.8,0.3 120.0,0.0"></path>
											</svg>
										</a>
									</div>
								</li>
							</ul>
						</div>
					</div>
					<article class="howtos">
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。 不幸的是，他们不支持所有的缓动函数，所以你必须指定贝赛尔曲线实现缓动函数。</p>
							<div class="click">
								<p>选取缓动函数以显示贝赛尔曲线。</p>
							</div><pre><code>div {
  -webkit-transition: all 600ms <strong>缓动函数的贝赛尔曲线</strong>;
  transition:         all 600ms <strong>缓动函数的贝赛尔曲线</strong>; }</code></pre></section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$缓动函数名称</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>缓动函数名称</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInSine">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInSine</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.7 8.4,59.6 9.6,59.5 10.8,59.4 12.0,59.3 13.2,59.1 14.4,58.9 15.6,58.8 16.8,58.6 18.0,58.3 19.2,58.1 20.4,57.9 21.6,57.6 22.8,57.3 24.0,57.1 25.2,56.8 26.4,56.5 27.6,56.1 28.8,55.8 30.0,55.4 31.2,55.1 32.4,54.7 33.6,54.3 34.8,53.9 36.0,53.5 37.2,53.0 38.4,52.6 39.6,52.1 40.8,51.6 42.0,51.2 43.2,50.7 44.4,50.1 45.6,49.6 46.8,49.1 48.0,48.5 49.2,48.0 50.4,47.4 51.6,46.8 52.8,46.2 54.0,45.6 55.2,45.0 56.4,44.4 57.6,43.7 58.8,43.1 60.0,42.4 61.2,41.8 62.4,41.1 63.6,40.4 64.8,39.7 66.0,39.0 67.2,38.2 68.4,37.5 69.6,36.8 70.8,36.0 72.0,35.3 73.2,34.5 74.4,33.7 75.6,32.9 76.8,32.1 78.0,31.3 79.2,30.5 80.4,29.7 81.6,28.9 82.8,28.1 84.0,27.2 85.2,26.4 86.4,25.5 87.6,24.7 88.8,23.8 90.0,23.0 91.2,22.1 92.4,21.2 93.6,20.3 94.8,19.4 96.0,18.5 97.2,17.6 98.4,16.7 99.6,15.8 100.8,14.9 102.0,14.0 103.2,13.1 104.4,12.2 105.6,11.2 106.8,10.3 108.0,9.4 109.2,8.5 110.4,7.5 111.6,6.6 112.8,5.6 114.0,4.7 115.2,3.8 116.4,2.8 117.6,1.9 118.8,0.9 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.47, 0, 0.745, 0.715)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.47, 0, 0.745, 0.715)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.47,0,.745,.715">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInSine</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInSine</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutSine">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutSine</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,59.1 2.4,58.1 3.6,57.2 4.8,56.2 6.0,55.3 7.2,54.4 8.4,53.4 9.6,52.5 10.8,51.5 12.0,50.6 13.2,49.7 14.4,48.8 15.6,47.8 16.8,46.9 18.0,46.0 19.2,45.1 20.4,44.2 21.6,43.3 22.8,42.4 24.0,41.5 25.2,40.6 26.4,39.7 27.6,38.8 28.8,37.9 30.0,37.0 31.2,36.2 32.4,35.3 33.6,34.5 34.8,33.6 36.0,32.8 37.2,31.9 38.4,31.1 39.6,30.3 40.8,29.5 42.0,28.7 43.2,27.9 44.4,27.1 45.6,26.3 46.8,25.5 48.0,24.7 49.2,24.0 50.4,23.2 51.6,22.5 52.8,21.8 54.0,21.0 55.2,20.3 56.4,19.6 57.6,18.9 58.8,18.2 60.0,17.6 61.2,16.9 62.4,16.3 63.6,15.6 64.8,15.0 66.0,14.4 67.2,13.8 68.4,13.2 69.6,12.6 70.8,12.0 72.0,11.5 73.2,10.9 74.4,10.4 75.6,9.9 76.8,9.3 78.0,8.8 79.2,8.4 80.4,7.9 81.6,7.4 82.8,7.0 84.0,6.5 85.2,6.1 86.4,5.7 87.6,5.3 88.8,4.9 90.0,4.6 91.2,4.2 92.4,3.9 93.6,3.5 94.8,3.2 96.0,2.9 97.2,2.7 98.4,2.4 99.6,2.1 100.8,1.9 102.0,1.7 103.2,1.4 104.4,1.2 105.6,1.1 106.8,0.9 108.0,0.7 109.2,0.6 110.4,0.5 111.6,0.4 112.8,0.3 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.39, 0.575, 0.565, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.39, 0.575, 0.565, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.39,.575,.565,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutSine</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutSine</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutSine">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutSine</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,59.9 3.6,59.9 4.8,59.8 6.0,59.6 7.2,59.5 8.4,59.3 9.6,59.1 10.8,58.8 12.0,58.5 13.2,58.2 14.4,57.9 15.6,57.5 16.8,57.1 18.0,56.7 19.2,56.3 20.4,55.8 21.6,55.3 22.8,54.8 24.0,54.3 25.2,53.7 26.4,53.1 27.6,52.5 28.8,51.9 30.0,51.2 31.2,50.5 32.4,49.8 33.6,49.1 34.8,48.4 36.0,47.6 37.2,46.9 38.4,46.1 39.6,45.3 40.8,44.5 42.0,43.6 43.2,42.8 44.4,41.9 45.6,41.0 46.8,40.2 48.0,39.3 49.2,38.4 50.4,37.5 51.6,36.5 52.8,35.6 54.0,34.7 55.2,33.8 56.4,32.8 57.6,31.9 58.8,30.9 60.0,30.0 61.2,29.1 62.4,28.1 63.6,27.2 64.8,26.2 66.0,25.3 67.2,24.4 68.4,23.5 69.6,22.5 70.8,21.6 72.0,20.7 73.2,19.8 74.4,19.0 75.6,18.1 76.8,17.2 78.0,16.4 79.2,15.5 80.4,14.7 81.6,13.9 82.8,13.1 84.0,12.4 85.2,11.6 86.4,10.9 87.6,10.2 88.8,9.5 90.0,8.8 91.2,8.1 92.4,7.5 93.6,6.9 94.8,6.3 96.0,5.7 97.2,5.2 98.4,4.7 99.6,4.2 100.8,3.7 102.0,3.3 103.2,2.9 104.4,2.5 105.6,2.1 106.8,1.8 108.0,1.5 109.2,1.2 110.4,0.9 111.6,0.7 112.8,0.5 114.0,0.4 115.2,0.2 116.4,0.1 117.6,0.1 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.445, 0.05, 0.55, 0.95)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.445, 0.05, 0.55, 0.95)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.445,.05,.55,.95">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutSine</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutSine</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInQuad">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInQuad</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.7 19.2,58.5 20.4,58.3 21.6,58.1 22.8,57.8 24.0,57.6 25.2,57.4 26.4,57.1 27.6,56.8 28.8,56.5 30.0,56.3 31.2,55.9 32.4,55.6 33.6,55.3 34.8,55.0 36.0,54.6 37.2,54.2 38.4,53.9 39.6,53.5 40.8,53.1 42.0,52.7 43.2,52.2 44.4,51.8 45.6,51.3 46.8,50.9 48.0,50.4 49.2,49.9 50.4,49.4 51.6,48.9 52.8,48.4 54.0,47.9 55.2,47.3 56.4,46.7 57.6,46.2 58.8,45.6 60.0,45.0 61.2,44.4 62.4,43.8 63.6,43.1 64.8,42.5 66.0,41.8 67.2,41.2 68.4,40.5 69.6,39.8 70.8,39.1 72.0,38.4 73.2,37.7 74.4,36.9 75.6,36.2 76.8,35.4 78.0,34.7 79.2,33.9 80.4,33.1 81.6,32.3 82.8,31.4 84.0,30.6 85.2,29.8 86.4,28.9 87.6,28.0 88.8,27.1 90.0,26.3 91.2,25.3 92.4,24.4 93.6,23.5 94.8,22.6 96.0,21.6 97.2,20.6 98.4,19.7 99.6,18.7 100.8,17.7 102.0,16.7 103.2,15.6 104.4,14.6 105.6,13.5 106.8,12.5 108.0,11.4 109.2,10.3 110.4,9.2 111.6,8.1 112.8,7.0 114.0,5.9 115.2,4.7 116.4,3.5 117.6,2.4 118.8,1.2 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.55, 0.085, 0.68, 0.53)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.55, 0.085, 0.68, 0.53)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.55,.085,.68,.53">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInQuad</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuad</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutQuad">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutQuad</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,58.8 2.4,57.6 3.6,56.5 4.8,55.3 6.0,54.2 7.2,53.0 8.4,51.9 9.6,50.8 10.8,49.7 12.0,48.6 13.2,47.5 14.4,46.5 15.6,45.4 16.8,44.4 18.0,43.3 19.2,42.3 20.4,41.3 21.6,40.3 22.8,39.4 24.0,38.4 25.2,37.4 26.4,36.5 27.6,35.6 28.8,34.7 30.0,33.8 31.2,32.9 32.4,32.0 33.6,31.1 34.8,30.2 36.0,29.4 37.2,28.6 38.4,27.7 39.6,26.9 40.8,26.1 42.0,25.4 43.2,24.6 44.4,23.8 45.6,23.1 46.8,22.3 48.0,21.6 49.2,20.9 50.4,20.2 51.6,19.5 52.8,18.8 54.0,18.2 55.2,17.5 56.4,16.9 57.6,16.2 58.8,15.6 60.0,15.0 61.2,14.4 62.4,13.8 63.6,13.3 64.8,12.7 66.0,12.1 67.2,11.6 68.4,11.1 69.6,10.6 70.8,10.1 72.0,9.6 73.2,9.1 74.4,8.7 75.6,8.2 76.8,7.8 78.0,7.3 79.2,6.9 80.4,6.5 81.6,6.1 82.8,5.8 84.0,5.4 85.2,5.0 86.4,4.7 87.6,4.4 88.8,4.1 90.0,3.8 91.2,3.5 92.4,3.2 93.6,2.9 94.8,2.6 96.0,2.4 97.2,2.2 98.4,1.9 99.6,1.7 100.8,1.5 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.25, 0.46, 0.45, 0.94)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.25, 0.46, 0.45, 0.94)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.25,.46,.45,.94">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutQuad</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuad</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutQuad">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutQuad</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.8 6.0,59.7 7.2,59.6 8.4,59.4 9.6,59.2 10.8,59.0 12.0,58.8 13.2,58.5 14.4,58.3 15.6,58.0 16.8,57.6 18.0,57.3 19.2,56.9 20.4,56.5 21.6,56.1 22.8,55.7 24.0,55.2 25.2,54.7 26.4,54.2 27.6,53.7 28.8,53.1 30.0,52.5 31.2,51.9 32.4,51.3 33.6,50.6 34.8,49.9 36.0,49.2 37.2,48.5 38.4,47.7 39.6,46.9 40.8,46.1 42.0,45.3 43.2,44.4 44.4,43.6 45.6,42.7 46.8,41.7 48.0,40.8 49.2,39.8 50.4,38.8 51.6,37.8 52.8,36.8 54.0,35.7 55.2,34.6 56.4,33.5 57.6,32.4 58.8,31.2 60.0,30.0 61.2,28.8 62.4,27.6 63.6,26.5 64.8,25.4 66.0,24.3 67.2,23.2 68.4,22.2 69.6,21.2 70.8,20.2 72.0,19.2 73.2,18.3 74.4,17.3 75.6,16.4 76.8,15.6 78.0,14.7 79.2,13.9 80.4,13.1 81.6,12.3 82.8,11.5 84.0,10.8 85.2,10.1 86.4,9.4 87.6,8.7 88.8,8.1 90.0,7.5 91.2,6.9 92.4,6.3 93.6,5.8 94.8,5.3 96.0,4.8 97.2,4.3 98.4,3.9 99.6,3.5 100.8,3.1 102.0,2.7 103.2,2.4 104.4,2.0 105.6,1.7 106.8,1.5 108.0,1.2 109.2,1.0 110.4,0.8 111.6,0.6 112.8,0.4 114.0,0.3 115.2,0.2 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.455, 0.03, 0.515, 0.955)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.455, 0.03, 0.515, 0.955)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.455,.03,.515,.955">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutQuad</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuad</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInCubic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInCubic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.7 21.6,59.7 22.8,59.6 24.0,59.5 25.2,59.4 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.7 34.8,58.5 36.0,58.4 37.2,58.2 38.4,58.0 39.6,57.8 40.8,57.6 42.0,57.4 43.2,57.2 44.4,57.0 45.6,56.7 46.8,56.4 48.0,56.2 49.2,55.9 50.4,55.6 51.6,55.2 52.8,54.9 54.0,54.5 55.2,54.2 56.4,53.8 57.6,53.4 58.8,52.9 60.0,52.5 61.2,52.0 62.4,51.6 63.6,51.1 64.8,50.6 66.0,50.0 67.2,49.5 68.4,48.9 69.6,48.3 70.8,47.7 72.0,47.0 73.2,46.4 74.4,45.7 75.6,45.0 76.8,44.3 78.0,43.5 79.2,42.8 80.4,42.0 81.6,41.1 82.8,40.3 84.0,39.4 85.2,38.5 86.4,37.6 87.6,36.7 88.8,35.7 90.0,34.7 91.2,33.7 92.4,32.6 93.6,31.5 94.8,30.4 96.0,29.3 97.2,28.1 98.4,26.9 99.6,25.7 100.8,24.4 102.0,23.2 103.2,21.8 104.4,20.5 105.6,19.1 106.8,17.7 108.0,16.3 109.2,14.8 110.4,13.3 111.6,11.7 112.8,10.2 114.0,8.6 115.2,6.9 116.4,5.2 117.6,3.5 118.8,1.8 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.55, 0.055, 0.675, 0.19)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.55, 0.055, 0.675, 0.19)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.55,.055,.675,.19">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInCubic</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInCubic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutCubic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutCubic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,58.2 2.4,56.5 3.6,54.8 4.8,53.1 6.0,51.4 7.2,49.8 8.4,48.3 9.6,46.7 10.8,45.2 12.0,43.7 13.2,42.3 14.4,40.9 15.6,39.5 16.8,38.2 18.0,36.8 19.2,35.6 20.4,34.3 21.6,33.1 22.8,31.9 24.0,30.7 25.2,29.6 26.4,28.5 27.6,27.4 28.8,26.3 30.0,25.3 31.2,24.3 32.4,23.3 33.6,22.4 34.8,21.5 36.0,20.6 37.2,19.7 38.4,18.9 39.6,18.0 40.8,17.2 42.0,16.5 43.2,15.7 44.4,15.0 45.6,14.3 46.8,13.6 48.0,13.0 49.2,12.3 50.4,11.7 51.6,11.1 52.8,10.5 54.0,10.0 55.2,9.4 56.4,8.9 57.6,8.4 58.8,8.0 60.0,7.5 61.2,7.1 62.4,6.6 63.6,6.2 64.8,5.8 66.0,5.5 67.2,5.1 68.4,4.8 69.6,4.4 70.8,4.1 72.0,3.8 73.2,3.6 74.4,3.3 75.6,3.0 76.8,2.8 78.0,2.6 79.2,2.4 80.4,2.2 81.6,2.0 82.8,1.8 84.0,1.6 85.2,1.5 86.4,1.3 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.6 96.0,0.5 97.2,0.4 98.4,0.3 99.6,0.3 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.215, 0.61, 0.355, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.215, 0.61, 0.355, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.215,.61,.355,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutCubic</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutCubic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutCubic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutCubic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.8 12.0,59.8 13.2,59.7 14.4,59.6 15.6,59.5 16.8,59.3 18.0,59.2 19.2,59.0 20.4,58.8 21.6,58.6 22.8,58.4 24.0,58.1 25.2,57.8 26.4,57.4 27.6,57.1 28.8,56.7 30.0,56.3 31.2,55.8 32.4,55.3 33.6,54.7 34.8,54.1 36.0,53.5 37.2,52.9 38.4,52.1 39.6,51.4 40.8,50.6 42.0,49.7 43.2,48.8 44.4,47.8 45.6,46.8 46.8,45.8 48.0,44.6 49.2,43.5 50.4,42.2 51.6,40.9 52.8,39.6 54.0,38.1 55.2,36.6 56.4,35.1 57.6,33.5 58.8,31.8 60.0,30.0 61.2,28.2 62.4,26.5 63.6,24.9 64.8,23.4 66.0,21.9 67.2,20.4 68.4,19.1 69.6,17.8 70.8,16.5 72.0,15.4 73.2,14.2 74.4,13.2 75.6,12.2 76.8,11.2 78.0,10.3 79.2,9.4 80.4,8.6 81.6,7.9 82.8,7.1 84.0,6.5 85.2,5.9 86.4,5.3 87.6,4.7 88.8,4.2 90.0,3.8 91.2,3.3 92.4,2.9 93.6,2.6 94.8,2.2 96.0,1.9 97.2,1.6 98.4,1.4 99.6,1.2 100.8,1.0 102.0,0.8 103.2,0.7 104.4,0.5 105.6,0.4 106.8,0.3 108.0,0.2 109.2,0.2 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.645, 0.045, 0.355, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.645, 0.045, 0.355, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.645,.045,.355,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutCubic</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutCubic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInQuart">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInQuart</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,59.9 21.6,59.9 22.8,59.9 24.0,59.9 25.2,59.9 26.4,59.9 27.6,59.8 28.8,59.8 30.0,59.8 31.2,59.7 32.4,59.7 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.4 38.4,59.4 39.6,59.3 40.8,59.2 42.0,59.1 43.2,59.0 44.4,58.9 45.6,58.7 46.8,58.6 48.0,58.5 49.2,58.3 50.4,58.1 51.6,57.9 52.8,57.8 54.0,57.5 55.2,57.3 56.4,57.1 57.6,56.8 58.8,56.5 60.0,56.3 61.2,55.9 62.4,55.6 63.6,55.3 64.8,54.9 66.0,54.5 67.2,54.1 68.4,53.7 69.6,53.2 70.8,52.7 72.0,52.2 73.2,51.7 74.4,51.1 75.6,50.5 76.8,49.9 78.0,49.3 79.2,48.6 80.4,47.9 81.6,47.2 82.8,46.4 84.0,45.6 85.2,44.8 86.4,43.9 87.6,43.0 88.8,42.0 90.0,41.0 91.2,40.0 92.4,38.9 93.6,37.8 94.8,36.6 96.0,35.4 97.2,34.2 98.4,32.9 99.6,31.5 100.8,30.1 102.0,28.7 103.2,27.2 104.4,25.6 105.6,24.0 106.8,22.4 108.0,20.6 109.2,18.9 110.4,17.0 111.6,15.1 112.8,13.2 114.0,11.1 115.2,9.0 116.4,6.9 117.6,4.7 118.8,2.4 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.895, 0.03, 0.685, 0.22)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.895, 0.03, 0.685, 0.22)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.895,.03,.685,.22">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInQuart</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuart</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutQuart">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutQuart</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,57.6 2.4,55.3 3.6,53.1 4.8,51.0 6.0,48.9 7.2,46.8 8.4,44.9 9.6,43.0 10.8,41.1 12.0,39.4 13.2,37.6 14.4,36.0 15.6,34.4 16.8,32.8 18.0,31.3 19.2,29.9 20.4,28.5 21.6,27.1 22.8,25.8 24.0,24.6 25.2,23.4 26.4,22.2 27.6,21.1 28.8,20.0 30.0,19.0 31.2,18.0 32.4,17.0 33.6,16.1 34.8,15.2 36.0,14.4 37.2,13.6 38.4,12.8 39.6,12.1 40.8,11.4 42.0,10.7 43.2,10.1 44.4,9.5 45.6,8.9 46.8,8.3 48.0,7.8 49.2,7.3 50.4,6.8 51.6,6.3 52.8,5.9 54.0,5.5 55.2,5.1 56.4,4.7 57.6,4.4 58.8,4.1 60.0,3.8 61.2,3.5 62.4,3.2 63.6,2.9 64.8,2.7 66.0,2.5 67.2,2.2 68.4,2.1 69.6,1.9 70.8,1.7 72.0,1.5 73.2,1.4 74.4,1.3 75.6,1.1 76.8,1.0 78.0,0.9 79.2,0.8 80.4,0.7 81.6,0.6 82.8,0.6 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.3 88.8,0.3 90.0,0.2 91.2,0.2 92.4,0.2 93.6,0.1 94.8,0.1 96.0,0.1 97.2,0.1 98.4,0.1 99.6,0.1 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.165, 0.84, 0.44, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.165, 0.84, 0.44, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.165,.84,.44,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutQuart</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuart</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutQuart">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutQuart</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.6 21.6,59.5 22.8,59.4 24.0,59.2 25.2,59.1 26.4,58.9 27.6,58.7 28.8,58.4 30.0,58.1 31.2,57.8 32.4,57.4 33.6,57.0 34.8,56.6 36.0,56.1 37.2,55.6 38.4,55.0 39.6,54.3 40.8,53.6 42.0,52.8 43.2,51.9 44.4,51.0 45.6,50.0 46.8,48.9 48.0,47.7 49.2,46.4 50.4,45.1 51.6,43.6 52.8,42.0 54.0,40.3 55.2,38.5 56.4,36.6 57.6,34.5 58.8,32.3 60.0,30.0 61.2,27.7 62.4,25.5 63.6,23.4 64.8,21.5 66.0,19.7 67.2,18.0 68.4,16.4 69.6,14.9 70.8,13.6 72.0,12.3 73.2,11.1 74.4,10.0 75.6,9.0 76.8,8.1 78.0,7.2 79.2,6.4 80.4,5.7 81.6,5.0 82.8,4.4 84.0,3.9 85.2,3.4 86.4,3.0 87.6,2.6 88.8,2.2 90.0,1.9 91.2,1.6 92.4,1.3 93.6,1.1 94.8,0.9 96.0,0.8 97.2,0.6 98.4,0.5 99.6,0.4 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.77, 0, 0.175, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.77, 0, 0.175, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.77,0,.175,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutQuart</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuart</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInQuint">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInQuint</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,60.0 18.0,60.0 19.2,60.0 20.4,60.0 21.6,60.0 22.8,60.0 24.0,60.0 25.2,60.0 26.4,60.0 27.6,60.0 28.8,60.0 30.0,59.9 31.2,59.9 32.4,59.9 33.6,59.9 34.8,59.9 36.0,59.9 37.2,59.8 38.4,59.8 39.6,59.8 40.8,59.7 42.0,59.7 43.2,59.6 44.4,59.6 45.6,59.5 46.8,59.5 48.0,59.4 49.2,59.3 50.4,59.2 51.6,59.1 52.8,59.0 54.0,58.9 55.2,58.8 56.4,58.6 57.6,58.5 58.8,58.3 60.0,58.1 61.2,57.9 62.4,57.7 63.6,57.5 64.8,57.2 66.0,57.0 67.2,56.7 68.4,56.4 69.6,56.1 70.8,55.7 72.0,55.3 73.2,54.9 74.4,54.5 75.6,54.0 76.8,53.6 78.0,53.0 79.2,52.5 80.4,51.9 81.6,51.3 82.8,50.6 84.0,49.9 85.2,49.2 86.4,48.4 87.6,47.6 88.8,46.7 90.0,45.8 91.2,44.8 92.4,43.8 93.6,42.7 94.8,41.5 96.0,40.3 97.2,39.1 98.4,37.8 99.6,36.4 100.8,34.9 102.0,33.4 103.2,31.8 104.4,30.1 105.6,28.3 106.8,26.5 108.0,24.6 109.2,22.6 110.4,20.5 111.6,18.3 112.8,16.0 114.0,13.6 115.2,11.1 116.4,8.5 117.6,5.8 118.8,2.9 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.755, 0.05, 0.855, 0.06)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.755, 0.05, 0.855, 0.06)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.755,.05,.855,.06">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInQuint</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInQuint</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutQuint">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutQuint</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,57.1 2.4,54.2 3.6,51.5 4.8,48.9 6.0,46.4 7.2,44.0 8.4,41.7 9.6,39.5 10.8,37.4 12.0,35.4 13.2,33.5 14.4,31.7 15.6,29.9 16.8,28.2 18.0,26.6 19.2,25.1 20.4,23.6 21.6,22.2 22.8,20.9 24.0,19.7 25.2,18.5 26.4,17.3 27.6,16.2 28.8,15.2 30.0,14.2 31.2,13.3 32.4,12.4 33.6,11.6 34.8,10.8 36.0,10.1 37.2,9.4 38.4,8.7 39.6,8.1 40.8,7.5 42.0,7.0 43.2,6.4 44.4,6.0 45.6,5.5 46.8,5.1 48.0,4.7 49.2,4.3 50.4,3.9 51.6,3.6 52.8,3.3 54.0,3.0 55.2,2.8 56.4,2.5 57.6,2.3 58.8,2.1 60.0,1.9 61.2,1.7 62.4,1.5 63.6,1.4 64.8,1.2 66.0,1.1 67.2,1.0 68.4,0.9 69.6,0.8 70.8,0.7 72.0,0.6 73.2,0.5 74.4,0.5 75.6,0.4 76.8,0.4 78.0,0.3 79.2,0.3 80.4,0.2 81.6,0.2 82.8,0.2 84.0,0.1 85.2,0.1 86.4,0.1 87.6,0.1 88.8,0.1 90.0,0.1 91.2,0.0 92.4,0.0 93.6,0.0 94.8,0.0 96.0,0.0 97.2,0.0 98.4,0.0 99.6,0.0 100.8,0.0 102.0,0.0 103.2,0.0 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.23, 1, 0.32, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.23, 1, 0.32, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.23,1,.32,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutQuint</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutQuint</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutQuint">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutQuint</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,60.0 8.4,60.0 9.6,60.0 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.0 15.6,60.0 16.8,59.9 18.0,59.9 19.2,59.9 20.4,59.9 21.6,59.8 22.8,59.8 24.0,59.7 25.2,59.6 26.4,59.5 27.6,59.4 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.6 33.6,58.3 34.8,58.0 36.0,57.7 37.2,57.3 38.4,56.8 39.6,56.2 40.8,55.6 42.0,55.0 43.2,54.2 44.4,53.3 45.6,52.4 46.8,51.3 48.0,50.2 49.2,48.9 50.4,47.5 51.6,45.9 52.8,44.2 54.0,42.3 55.2,40.2 56.4,38.0 57.6,35.5 58.8,32.9 60.0,30.0 61.2,27.1 62.4,24.5 63.6,22.0 64.8,19.8 66.0,17.7 67.2,15.8 68.4,14.1 69.6,12.5 70.8,11.1 72.0,9.8 73.2,8.7 74.4,7.6 75.6,6.7 76.8,5.8 78.0,5.0 79.2,4.4 80.4,3.8 81.6,3.2 82.8,2.7 84.0,2.3 85.2,2.0 86.4,1.7 87.6,1.4 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.6 93.6,0.5 94.8,0.4 96.0,0.3 97.2,0.2 98.4,0.2 99.6,0.1 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.0 105.6,0.0 106.8,0.0 108.0,0.0 109.2,0.0 110.4,0.0 111.6,0.0 112.8,0.0 114.0,0.0 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.86, 0, 0.07, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.86, 0, 0.07, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.86,0,.07,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutQuint</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutQuint</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInExpo">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInExpo</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,59.9 2.4,59.9 3.6,59.9 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.8 18.0,59.8 19.2,59.8 20.4,59.8 21.6,59.8 22.8,59.8 24.0,59.8 25.2,59.7 26.4,59.7 27.6,59.7 28.8,59.7 30.0,59.7 31.2,59.6 32.4,59.6 33.6,59.6 34.8,59.6 36.0,59.5 37.2,59.5 38.4,59.5 39.6,59.4 40.8,59.4 42.0,59.3 43.2,59.3 44.4,59.2 45.6,59.2 46.8,59.1 48.0,59.1 49.2,59.0 50.4,58.9 51.6,58.8 52.8,58.8 54.0,58.7 55.2,58.6 56.4,58.5 57.6,58.4 58.8,58.3 60.0,58.1 61.2,58.0 62.4,57.8 63.6,57.7 64.8,57.5 66.0,57.3 67.2,57.2 68.4,57.0 69.6,56.7 70.8,56.5 72.0,56.3 73.2,56.0 74.4,55.7 75.6,55.4 76.8,55.1 78.0,54.7 79.2,54.3 80.4,53.9 81.6,53.5 82.8,53.0 84.0,52.5 85.2,52.0 86.4,51.4 87.6,50.8 88.8,50.1 90.0,49.4 91.2,48.6 92.4,47.8 93.6,46.9 94.8,46.0 96.0,45.0 97.2,43.9 98.4,42.8 99.6,41.5 100.8,40.2 102.0,38.8 103.2,37.3 104.4,35.6 105.6,33.9 106.8,32.0 108.0,30.0 109.2,27.8 110.4,25.5 111.6,23.1 112.8,20.4 114.0,17.6 115.2,14.5 116.4,11.3 117.6,7.8 118.8,4.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.95, 0.05, 0.795, 0.035)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.95, 0.05, 0.795, 0.035)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.95,.05,.795,.035">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInExpo</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInExpo</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutExpo">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutExpo</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,56.0 2.4,52.2 3.6,48.7 4.8,45.5 6.0,42.4 7.2,39.6 8.4,36.9 9.6,34.5 10.8,32.2 12.0,30.0 13.2,28.0 14.4,26.1 15.6,24.4 16.8,22.7 18.0,21.2 19.2,19.8 20.4,18.5 21.6,17.2 22.8,16.1 24.0,15.0 25.2,14.0 26.4,13.1 27.6,12.2 28.8,11.4 30.0,10.6 31.2,9.9 32.4,9.2 33.6,8.6 34.8,8.0 36.0,7.5 37.2,7.0 38.4,6.5 39.6,6.1 40.8,5.7 42.0,5.3 43.2,4.9 44.4,4.6 45.6,4.3 46.8,4.0 48.0,3.8 49.2,3.5 50.4,3.3 51.6,3.0 52.8,2.8 54.0,2.7 55.2,2.5 56.4,2.3 57.6,2.2 58.8,2.0 60.0,1.9 61.2,1.7 62.4,1.6 63.6,1.5 64.8,1.4 66.0,1.3 67.2,1.2 68.4,1.2 69.6,1.1 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.8 75.6,0.8 76.8,0.7 78.0,0.7 79.2,0.6 80.4,0.6 81.6,0.5 82.8,0.5 84.0,0.5 85.2,0.4 86.4,0.4 87.6,0.4 88.8,0.4 90.0,0.3 91.2,0.3 92.4,0.3 93.6,0.3 94.8,0.3 96.0,0.2 97.2,0.2 98.4,0.2 99.6,0.2 100.8,0.2 102.0,0.2 103.2,0.2 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.1 117.6,0.1 118.8,0.1 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.19, 1, 0.22, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.19, 1, 0.22, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.19,1,.22,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutExpo</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutExpo</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutExpo">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutExpo</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,59.9 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.8 15.6,59.8 16.8,59.8 18.0,59.8 19.2,59.7 20.4,59.7 21.6,59.6 22.8,59.6 24.0,59.5 25.2,59.5 26.4,59.4 27.6,59.3 28.8,59.2 30.0,59.1 31.2,58.9 32.4,58.8 33.6,58.6 34.8,58.4 36.0,58.1 37.2,57.8 38.4,57.5 39.6,57.2 40.8,56.7 42.0,56.3 43.2,55.7 44.4,55.1 45.6,54.3 46.8,53.5 48.0,52.5 49.2,51.4 50.4,50.1 51.6,48.6 52.8,46.9 54.0,45.0 55.2,42.8 56.4,40.2 57.6,37.3 58.8,33.9 60.0,30.0 61.2,26.1 62.4,22.7 63.6,19.8 64.8,17.2 66.0,15.0 67.2,13.1 68.4,11.4 69.6,9.9 70.8,8.6 72.0,7.5 73.2,6.5 74.4,5.7 75.6,4.9 76.8,4.3 78.0,3.8 79.2,3.3 80.4,2.8 81.6,2.5 82.8,2.2 84.0,1.9 85.2,1.6 86.4,1.4 87.6,1.2 88.8,1.1 90.0,0.9 91.2,0.8 92.4,0.7 93.6,0.6 94.8,0.5 96.0,0.5 97.2,0.4 98.4,0.4 99.6,0.3 100.8,0.3 102.0,0.2 103.2,0.2 104.4,0.2 105.6,0.2 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.1 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(1, 0, 0, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(1, 0, 0, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#1,0,0,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutExpo</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutExpo</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInCirc">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInCirc</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.8 10.8,59.8 12.0,59.7 13.2,59.6 14.4,59.6 15.6,59.5 16.8,59.4 18.0,59.3 19.2,59.2 20.4,59.1 21.6,59.0 22.8,58.9 24.0,58.8 25.2,58.7 26.4,58.5 27.6,58.4 28.8,58.2 30.0,58.1 31.2,57.9 32.4,57.8 33.6,57.6 34.8,57.4 36.0,57.2 37.2,57.0 38.4,56.8 39.6,56.6 40.8,56.4 42.0,56.2 43.2,56.0 44.4,55.7 45.6,55.5 46.8,55.2 48.0,55.0 49.2,54.7 50.4,54.5 51.6,54.2 52.8,53.9 54.0,53.6 55.2,53.3 56.4,53.0 57.6,52.6 58.8,52.3 60.0,52.0 61.2,51.6 62.4,51.2 63.6,50.9 64.8,50.5 66.0,50.1 67.2,49.7 68.4,49.3 69.6,48.9 70.8,48.4 72.0,48.0 73.2,47.5 74.4,47.1 75.6,46.6 76.8,46.1 78.0,45.6 79.2,45.1 80.4,44.5 81.6,44.0 82.8,43.4 84.0,42.8 85.2,42.3 86.4,41.6 87.6,41.0 88.8,40.4 90.0,39.7 91.2,39.0 92.4,38.3 93.6,37.5 94.8,36.8 96.0,36.0 97.2,35.2 98.4,34.3 99.6,33.5 100.8,32.6 102.0,31.6 103.2,30.6 104.4,29.6 105.6,28.5 106.8,27.4 108.0,26.2 109.2,24.9 110.4,23.5 111.6,22.1 112.8,20.5 114.0,18.7 115.2,16.8 116.4,14.6 117.6,11.9 118.8,8.5 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.6, 0.04, 0.98, 0.335)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.6, 0.04, 0.98, 0.335)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.6,.04,.98,.335">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInCirc</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInCirc</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutCirc">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutCirc</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,51.5 2.4,48.1 3.6,45.4 4.8,43.2 6.0,41.3 7.2,39.5 8.4,37.9 9.6,36.5 10.8,35.1 12.0,33.8 13.2,32.6 14.4,31.5 15.6,30.4 16.8,29.4 18.0,28.4 19.2,27.4 20.4,26.5 21.6,25.7 22.8,24.8 24.0,24.0 25.2,23.2 26.4,22.5 27.6,21.7 28.8,21.0 30.0,20.3 31.2,19.6 32.4,19.0 33.6,18.4 34.8,17.7 36.0,17.2 37.2,16.6 38.4,16.0 39.6,15.5 40.8,14.9 42.0,14.4 43.2,13.9 44.4,13.4 45.6,12.9 46.8,12.5 48.0,12.0 49.2,11.6 50.4,11.1 51.6,10.7 52.8,10.3 54.0,9.9 55.2,9.5 56.4,9.1 57.6,8.8 58.8,8.4 60.0,8.0 61.2,7.7 62.4,7.4 63.6,7.0 64.8,6.7 66.0,6.4 67.2,6.1 68.4,5.8 69.6,5.5 70.8,5.3 72.0,5.0 73.2,4.8 74.4,4.5 75.6,4.3 76.8,4.0 78.0,3.8 79.2,3.6 80.4,3.4 81.6,3.2 82.8,3.0 84.0,2.8 85.2,2.6 86.4,2.4 87.6,2.2 88.8,2.1 90.0,1.9 91.2,1.8 92.4,1.6 93.6,1.5 94.8,1.3 96.0,1.2 97.2,1.1 98.4,1.0 99.6,0.9 100.8,0.8 102.0,0.7 103.2,0.6 104.4,0.5 105.6,0.4 106.8,0.4 108.0,0.3 109.2,0.2 110.4,0.2 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.075, 0.82, 0.165, 1)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.075, 0.82, 0.165, 1)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.075,.82,.165,1">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutCirc</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutCirc</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutCirc">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutCirc</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,59.9 4.8,59.9 6.0,59.8 7.2,59.8 8.4,59.7 9.6,59.6 10.8,59.5 12.0,59.4 13.2,59.3 14.4,59.1 15.6,59.0 16.8,58.8 18.0,58.6 19.2,58.4 20.4,58.2 21.6,58.0 22.8,57.7 24.0,57.5 25.2,57.2 26.4,56.9 27.6,56.6 28.8,56.3 30.0,56.0 31.2,55.6 32.4,55.2 33.6,54.9 34.8,54.4 36.0,54.0 37.2,53.5 38.4,53.1 39.6,52.5 40.8,52.0 42.0,51.4 43.2,50.8 44.4,50.2 45.6,49.5 46.8,48.8 48.0,48.0 49.2,47.2 50.4,46.3 51.6,45.3 52.8,44.2 54.0,43.1 55.2,41.8 56.4,40.2 57.6,38.4 58.8,36.0 60.0,30.0 61.2,24.0 62.4,21.6 63.6,19.8 64.8,18.2 66.0,16.9 67.2,15.8 68.4,14.7 69.6,13.7 70.8,12.8 72.0,12.0 73.2,11.2 74.4,10.5 75.6,9.8 76.8,9.2 78.0,8.6 79.2,8.0 80.4,7.5 81.6,6.9 82.8,6.5 84.0,6.0 85.2,5.6 86.4,5.1 87.6,4.8 88.8,4.4 90.0,4.0 91.2,3.7 92.4,3.4 93.6,3.1 94.8,2.8 96.0,2.5 97.2,2.3 98.4,2.0 99.6,1.8 100.8,1.6 102.0,1.4 103.2,1.2 104.4,1.0 105.6,0.9 106.8,0.7 108.0,0.6 109.2,0.5 110.4,0.4 111.6,0.3 112.8,0.2 114.0,0.2 115.2,0.1 116.4,0.1 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.785, 0.135, 0.15, 0.86)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.785, 0.135, 0.15, 0.86)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.785,.135,.15,.86">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutCirc</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutCirc</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInBack">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInBack</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.1 4.8,60.2 6.0,60.2 7.2,60.3 8.4,60.4 9.6,60.6 10.8,60.7 12.0,60.9 13.2,61.0 14.4,61.2 15.6,61.4 16.8,61.6 18.0,61.8 19.2,61.9 20.4,62.2 21.6,62.4 22.8,62.6 24.0,62.8 25.2,63.0 26.4,63.2 27.6,63.4 28.8,63.6 30.0,63.8 31.2,64.1 32.4,64.3 33.6,64.4 34.8,64.6 36.0,64.8 37.2,65.0 38.4,65.1 39.6,65.3 40.8,65.4 42.0,65.6 43.2,65.7 44.4,65.8 45.6,65.8 46.8,65.9 48.0,66.0 49.2,66.0 50.4,66.0 51.6,66.0 52.8,66.0 54.0,65.9 55.2,65.8 56.4,65.7 57.6,65.6 58.8,65.4 60.0,65.3 61.2,65.1 62.4,64.8 63.6,64.5 64.8,64.2 66.0,63.9 67.2,63.6 68.4,63.2 69.6,62.7 70.8,62.2 72.0,61.7 73.2,61.2 74.4,60.6 75.6,60.0 76.8,59.3 78.0,58.6 79.2,57.9 80.4,57.1 81.6,56.2 82.8,55.4 84.0,54.4 85.2,53.5 86.4,52.4 87.6,51.3 88.8,50.2 90.0,49.0 91.2,47.8 92.4,46.5 93.6,45.2 94.8,43.8 96.0,42.3 97.2,40.8 98.4,39.3 99.6,37.6 100.8,36.0 102.0,34.2 103.2,32.4 104.4,30.5 105.6,28.6 106.8,26.6 108.0,24.5 109.2,22.4 110.4,20.2 111.6,17.9 112.8,15.6 114.0,13.2 115.2,10.7 116.4,8.1 117.6,5.5 118.8,2.8 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.6, -0.28, 0.735, 0.045)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.6, -0.28, 0.735, 0.045)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.6,-.28,.735,.045">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInBack</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInBack</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutBack">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutBack</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,57.2 2.4,54.5 3.6,51.9 4.8,49.3 6.0,46.8 7.2,44.4 8.4,42.1 9.6,39.8 10.8,37.6 12.0,35.5 13.2,33.4 14.4,31.4 15.6,29.5 16.8,27.6 18.0,25.8 19.2,24.0 20.4,22.4 21.6,20.7 22.8,19.2 24.0,17.7 25.2,16.2 26.4,14.8 27.6,13.5 28.8,12.2 30.0,11.0 31.2,9.8 32.4,8.7 33.6,7.6 34.8,6.5 36.0,5.6 37.2,4.6 38.4,3.8 39.6,2.9 40.8,2.1 42.0,1.4 43.2,0.7 44.4,0.0 45.6,-0.6 46.8,-1.2 48.0,-1.7 49.2,-2.2 50.4,-2.7 51.6,-3.2 52.8,-3.6 54.0,-3.9 55.2,-4.2 56.4,-4.5 57.6,-4.8 58.8,-5.1 60.0,-5.3 61.2,-5.4 62.4,-5.6 63.6,-5.7 64.8,-5.8 66.0,-5.9 67.2,-6.0 68.4,-6.0 69.6,-6.0 70.8,-6.0 72.0,-6.0 73.2,-5.9 74.4,-5.8 75.6,-5.8 76.8,-5.7 78.0,-5.6 79.2,-5.4 80.4,-5.3 81.6,-5.1 82.8,-5.0 84.0,-4.8 85.2,-4.6 86.4,-4.4 87.6,-4.3 88.8,-4.1 90.0,-3.8 91.2,-3.6 92.4,-3.4 93.6,-3.2 94.8,-3.0 96.0,-2.8 97.2,-2.6 98.4,-2.4 99.6,-2.2 100.8,-1.9 102.0,-1.8 103.2,-1.6 104.4,-1.4 105.6,-1.2 106.8,-1.0 108.0,-0.9 109.2,-0.7 110.4,-0.6 111.6,-0.4 112.8,-0.3 114.0,-0.2 115.2,-0.2 116.4,-0.1 117.6,-0.0 118.8,-0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.175, 0.885, 0.32, 1.275)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.175, 0.885, 0.32, 1.275)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.175,.885,.32,1.275">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeOutBack</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutBack</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutBack">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutBack</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.1 3.6,60.3 4.8,60.4 6.0,60.7 7.2,60.9 8.4,61.2 9.6,61.6 10.8,61.9 12.0,62.3 13.2,62.6 14.4,63.0 15.6,63.4 16.8,63.7 18.0,64.1 19.2,64.4 20.4,64.8 21.6,65.1 22.8,65.3 24.0,65.6 25.2,65.7 26.4,65.9 27.6,66.0 28.8,66.0 30.0,66.0 31.2,65.9 32.4,65.7 33.6,65.5 34.8,65.1 36.0,64.7 37.2,64.2 38.4,63.6 39.6,62.9 40.8,62.1 42.0,61.2 43.2,60.1 44.4,58.9 45.6,57.6 46.8,56.2 48.0,54.6 49.2,52.9 50.4,51.0 51.6,49.0 52.8,46.8 54.0,44.4 55.2,41.9 56.4,39.2 57.6,36.3 58.8,33.3 60.0,30.0 61.2,26.7 62.4,23.7 63.6,20.8 64.8,18.1 66.0,15.6 67.2,13.2 68.4,11.0 69.6,9.0 70.8,7.1 72.0,5.4 73.2,3.8 74.4,2.4 75.6,1.1 76.8,-0.1 78.0,-1.2 79.2,-2.1 80.4,-2.9 81.6,-3.6 82.8,-4.2 84.0,-4.7 85.2,-5.1 86.4,-5.5 87.6,-5.7 88.8,-5.9 90.0,-6.0 91.2,-6.0 92.4,-6.0 93.6,-5.9 94.8,-5.7 96.0,-5.6 97.2,-5.3 98.4,-5.1 99.6,-4.8 100.8,-4.4 102.0,-4.1 103.2,-3.7 104.4,-3.4 105.6,-3.0 106.8,-2.6 108.0,-2.3 109.2,-1.9 110.4,-1.6 111.6,-1.2 112.8,-0.9 114.0,-0.7 115.2,-0.4 116.4,-0.3 117.6,-0.1 118.8,-0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>CSS 属性 <code>transition</code> 和 <code>animation</code> 允许你指定缓动函数。</p><pre><code>div {
  -webkit-transition: all 600ms <strong>cubic-bezier(0.68, -0.55, 0.265, 1.55)</strong>;
  transition:         all 600ms <strong>cubic-bezier(0.68, -0.55, 0.265, 1.55)</strong>; }</code></pre>
							<p>在 cubic-bezier.com
								<a target="_blank" href="http://cubic-bezier.com/#.68,-.55,.265,1.55">编辑</a>
							</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>Sass/SCSS 帮助你描述动画. Compass 除去了 CSS 属性 <code>transition</code> 和 <code>animation</code> 的前缀，还有
								<a href="https://github.com/jhardy/compass-ceaser-easing">Compass Ceaser</a> 插件允许你直接指定缓动函数名称来实现缓动函数。</p><pre><code>div {
  @include transition(all 600ms ceaser(<strong>$easeInOutBack</strong>)); }</code></pre></section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutBack</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInElastic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInElastic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,60.0 7.2,59.9 8.4,59.9 9.6,59.9 10.8,59.9 12.0,59.9 13.2,59.9 14.4,59.9 15.6,59.9 16.8,59.9 18.0,59.9 19.2,59.9 20.4,60.0 21.6,60.0 22.8,60.1 24.0,60.1 25.2,60.2 26.4,60.2 27.6,60.3 28.8,60.3 30.0,60.3 31.2,60.3 32.4,60.3 33.6,60.3 34.8,60.3 36.0,60.2 37.2,60.2 38.4,60.1 39.6,59.9 40.8,59.8 42.0,59.7 43.2,59.5 44.4,59.4 45.6,59.3 46.8,59.1 48.0,59.1 49.2,59.0 50.4,59.0 51.6,59.1 52.8,59.2 54.0,59.3 55.2,59.6 56.4,59.8 57.6,60.2 58.8,60.5 60.0,60.9 61.2,61.3 62.4,61.7 63.6,62.1 64.8,62.4 66.0,62.7 67.2,62.8 68.4,62.8 69.6,62.6 70.8,62.3 72.0,61.9 73.2,61.2 74.4,60.5 75.6,59.5 76.8,58.5 78.0,57.3 79.2,56.2 80.4,55.1 81.6,54.0 82.8,53.2 84.0,52.5 85.2,52.1 86.4,52.1 87.6,52.5 88.8,53.4 90.0,54.7 91.2,56.5 92.4,58.7 93.6,61.4 94.8,64.3 96.0,67.5 97.2,70.8 98.4,73.9 99.6,76.9 100.8,79.4 102.0,81.2 103.2,82.2 104.4,82.3 105.6,81.1 106.8,78.7 108.0,75.0 109.2,69.9 110.4,63.6 111.6,56.1 112.8,47.8 114.0,38.8 115.2,29.6 116.4,20.6 117.6,12.3 118.8,5.2 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInElastic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutElastic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutElastic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,54.8 2.4,47.7 3.6,39.4 4.8,30.4 6.0,21.2 7.2,12.2 8.4,3.9 9.6,-3.6 10.8,-9.9 12.0,-15.0 13.2,-18.7 14.4,-21.1 15.6,-22.3 16.8,-22.2 18.0,-21.2 19.2,-19.4 20.4,-16.9 21.6,-13.9 22.8,-10.8 24.0,-7.5 25.2,-4.3 26.4,-1.4 27.6,1.3 28.8,3.5 30.0,5.3 31.2,6.6 32.4,7.5 33.6,7.9 34.8,7.9 36.0,7.5 37.2,6.8 38.4,6.0 39.6,4.9 40.8,3.8 42.0,2.7 43.2,1.5 44.4,0.5 45.6,-0.5 46.8,-1.2 48.0,-1.9 49.2,-2.3 50.4,-2.6 51.6,-2.8 52.8,-2.8 54.0,-2.7 55.2,-2.4 56.4,-2.1 57.6,-1.7 58.8,-1.3 60.0,-0.9 61.2,-0.5 62.4,-0.2 63.6,0.2 64.8,0.4 66.0,0.7 67.2,0.8 68.4,0.9 69.6,1.0 70.8,1.0 72.0,0.9 73.2,0.9 74.4,0.7 75.6,0.6 76.8,0.5 78.0,0.3 79.2,0.2 80.4,0.1 81.6,-0.1 82.8,-0.2 84.0,-0.2 85.2,-0.3 86.4,-0.3 87.6,-0.3 88.8,-0.3 90.0,-0.3 91.2,-0.3 92.4,-0.3 93.6,-0.2 94.8,-0.2 96.0,-0.1 97.2,-0.1 98.4,-0.0 99.6,0.0 100.8,0.1 102.0,0.1 103.2,0.1 104.4,0.1 105.6,0.1 106.8,0.1 108.0,0.1 109.2,0.1 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.0 115.2,0.0 116.4,0.0 117.6,-0.0 118.8,-0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutElastic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutElastic">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutElastic</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,60.0 3.6,60.0 4.8,60.0 6.0,59.9 7.2,59.9 8.4,59.9 9.6,59.9 10.8,60.0 12.0,60.0 13.2,60.0 14.4,60.1 15.6,60.1 16.8,60.2 18.0,60.2 19.2,60.3 20.4,60.3 21.6,60.3 22.8,60.3 24.0,60.2 25.2,60.1 26.4,60.0 27.6,59.8 28.8,59.5 30.0,59.3 31.2,59.0 32.4,58.8 33.6,58.6 34.8,58.5 36.0,58.6 37.2,58.8 38.4,59.2 39.6,59.9 40.8,60.8 42.0,61.9 43.2,63.1 44.4,64.4 45.6,65.6 46.8,66.5 48.0,67.0 49.2,67.0 50.4,66.1 51.6,64.3 52.8,61.4 54.0,57.4 55.2,52.4 56.4,46.8 57.6,40.7 58.8,34.9 60.0,30.0 61.2,25.1 62.4,19.3 63.6,13.2 64.8,7.6 66.0,2.6 67.2,-1.4 68.4,-4.3 69.6,-6.1 70.8,-7.0 72.0,-7.0 73.2,-6.5 74.4,-5.6 75.6,-4.4 76.8,-3.1 78.0,-1.9 79.2,-0.8 80.4,0.1 81.6,0.8 82.8,1.2 84.0,1.4 85.2,1.5 86.4,1.4 87.6,1.2 88.8,1.0 90.0,0.7 91.2,0.5 92.4,0.2 93.6,0.0 94.8,-0.1 96.0,-0.2 97.2,-0.3 98.4,-0.3 99.6,-0.3 100.8,-0.3 102.0,-0.2 103.2,-0.2 104.4,-0.1 105.6,-0.1 106.8,-0.0 108.0,0.0 109.2,0.0 110.4,0.1 111.6,0.1 112.8,0.1 114.0,0.1 115.2,0.0 116.4,0.0 117.6,0.0 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutElastic</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInBounce">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInBounce</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,59.6 2.4,59.4 3.6,59.2 4.8,59.1 6.0,59.1 7.2,59.2 8.4,59.3 9.6,59.6 10.8,60.0 12.0,59.3 13.2,58.6 14.4,58.0 15.6,57.5 16.8,57.0 18.0,56.7 19.2,56.5 20.4,56.3 21.6,56.3 22.8,56.3 24.0,56.4 25.2,56.6 26.4,56.9 27.6,57.3 28.8,57.8 30.0,58.4 31.2,59.0 32.4,59.8 33.6,58.8 34.8,57.3 36.0,55.8 37.2,54.5 38.4,53.2 39.6,52.0 40.8,51.0 42.0,50.0 43.2,49.1 44.4,48.2 45.6,47.5 46.8,46.9 48.0,46.3 49.2,45.9 50.4,45.5 51.6,45.3 52.8,45.1 54.0,45.0 55.2,45.0 56.4,45.1 57.6,45.3 58.8,45.6 60.0,45.9 61.2,46.4 62.4,46.9 63.6,47.6 64.8,48.3 66.0,49.1 67.2,50.0 68.4,51.0 69.6,52.1 70.8,53.3 72.0,54.6 73.2,56.0 74.4,57.4 75.6,59.0 76.8,58.8 78.0,55.6 79.2,52.5 80.4,49.4 81.6,46.5 82.8,43.6 84.0,40.8 85.2,38.2 86.4,35.6 87.6,33.1 88.8,30.7 90.0,28.4 91.2,26.1 92.4,24.0 93.6,22.0 94.8,20.0 96.0,18.1 97.2,16.4 98.4,14.7 99.6,13.1 100.8,11.6 102.0,10.2 103.2,8.9 104.4,7.7 105.6,6.5 106.8,5.5 108.0,4.5 109.2,3.7 110.4,2.9 111.6,2.2 112.8,1.6 114.0,1.1 115.2,0.7 116.4,0.4 117.6,0.2 118.8,0.0 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInBounce</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeOutBounce">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeOutBounce</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,60.0 2.4,59.8 3.6,59.6 4.8,59.3 6.0,58.9 7.2,58.4 8.4,57.8 9.6,57.1 10.8,56.3 12.0,55.5 13.2,54.5 14.4,53.5 15.6,52.3 16.8,51.1 18.0,49.8 19.2,48.4 20.4,46.9 21.6,45.3 22.8,43.6 24.0,41.8 25.2,40.0 26.4,38.0 27.6,36.0 28.8,33.9 30.0,31.6 31.2,29.3 32.4,26.9 33.6,24.4 34.8,21.8 36.0,19.2 37.2,16.4 38.4,13.5 39.6,10.6 40.8,7.5 42.0,4.4 43.2,1.2 44.4,1.0 45.6,2.6 46.8,4.0 48.0,5.4 49.2,6.7 50.4,7.9 51.6,9.0 52.8,10.0 54.0,10.9 55.2,11.7 56.4,12.4 57.6,13.1 58.8,13.6 60.0,14.1 61.2,14.4 62.4,14.7 63.6,14.9 64.8,15.0 66.0,15.0 67.2,14.9 68.4,14.7 69.6,14.5 70.8,14.1 72.0,13.7 73.2,13.1 74.4,12.5 75.6,11.8 76.8,10.9 78.0,10.0 79.2,9.0 80.4,8.0 81.6,6.8 82.8,5.5 84.0,4.2 85.2,2.7 86.4,1.2 87.6,0.2 88.8,1.0 90.0,1.6 91.2,2.2 92.4,2.7 93.6,3.1 94.8,3.4 96.0,3.6 97.2,3.7 98.4,3.7 99.6,3.7 100.8,3.5 102.0,3.3 103.2,3.0 104.4,2.5 105.6,2.0 106.8,1.4 108.0,0.7 109.2,0.0 110.4,0.4 111.6,0.7 112.8,0.8 114.0,0.9 115.2,0.9 116.4,0.8 117.6,0.6 118.8,0.4 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeOutBounce</strong>', function () { … })</code></pre></section>
					</article>
					<article class="easing-description easeInOutBounce">
						<a class="back" href="#">←<span class="text">所有缓动函数</span></a>
						<h2>easeInOutBounce</h2>
						<div class="graph">
							<div class="example">
								<div class="top"></div>
								<div class="bottom"></div>
							</div>
							<div class="dot"></div>
							<svg viewBox="-2 -40 124 140" xmlns="http://www.w3.org/2000/svg">
								<line x1="0" x2="0" y1="0" y2="60"></line><text x="2" y="6">x</text>
								<line x1="0" x2="120" y1="60" y2="60"></line><text x="115" y="57">t</text>
								<path d="M0,60 L1.2,59.7 2.4,59.5 3.6,59.6 4.8,59.8 6.0,59.6 7.2,59.0 8.4,58.5 9.6,58.2 10.8,58.1 12.0,58.2 13.2,58.5 14.4,58.9 15.6,59.5 16.8,59.4 18.0,57.9 19.2,56.6 20.4,55.5 21.6,54.5 22.8,53.8 24.0,53.2 25.2,52.8 26.4,52.5 27.6,52.5 28.8,52.6 30.0,53.0 31.2,53.5 32.4,54.2 33.6,55.0 34.8,56.1 36.0,57.3 37.2,58.7 38.4,59.4 39.6,56.2 40.8,53.2 42.0,50.4 43.2,47.8 44.4,45.3 45.6,43.1 46.8,41.0 48.0,39.1 49.2,37.4 50.4,35.8 51.6,34.4 52.8,33.3 54.0,32.3 55.2,31.5 56.4,30.8 57.6,30.4 58.8,30.1 60.0,30.0 61.2,29.9 62.4,29.6 63.6,29.2 64.8,28.5 66.0,27.7 67.2,26.7 68.4,25.6 69.6,24.2 70.8,22.6 72.0,20.9 73.2,19.0 74.4,16.9 75.6,14.7 76.8,12.2 78.0,9.6 79.2,6.8 80.4,3.8 81.6,0.6 82.8,1.3 84.0,2.7 85.2,3.9 86.4,5.0 87.6,5.8 88.8,6.5 90.0,7.0 91.2,7.4 92.4,7.5 93.6,7.5 94.8,7.2 96.0,6.8 97.2,6.2 98.4,5.5 99.6,4.5 100.8,3.4 102.0,2.1 103.2,0.6 104.4,0.5 105.6,1.1 106.8,1.5 108.0,1.8 109.2,1.9 110.4,1.8 111.6,1.5 112.8,1.0 114.0,0.4 115.2,0.2 116.4,0.4 117.6,0.5 118.8,0.3 120.0,0.0"></path>
							</svg>
						</div>
						<section class="css">
							<h3>CSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="scss">
							<h3>SCSS</h3>
							<p>不幸的是, CSS 不支持所有缓动函数。 但你可以通过 JavaScript 或是 CSS 动画的 <code>@keyframes</code>来实现。</p>
						</section>
						<section class="js">
							<h3>JavaScript</h3>
							<p>使用 jQuery 加上
								<a href="http://gsgd.co.uk/sandbox/jquery/easing/">jQuery Easing 插件</a>是实现缓动函数最简单的方法. 你只需要指定缓动函数名称给 <code>.animate</code> 函数当做第三个参数或是 <code>easing</code> 的键值。</p><pre><code>div.animate({ top: '-=100px' }, 600, '<strong>easeInOutBounce</strong>', function () { … })</code></pre></section>
					</article>
				</div>
			</div>
		</div>
		
		
		<script>
			jQuery.easing.jswing = jQuery.easing.swing, jQuery.extend(jQuery.easing, {
					def: "easeOutQuad",
					swing: function(n, e, t, a, i) {
						return jQuery.easing[jQuery.easing.def](n, e, t, a, i)
					},
					easeInQuad: function(n, e, t, a, i) {
						return a * (e /= i) * e + t
					},
					easeOutQuad: function(n, e, t, a, i) {
						return -a * (e /= i) * (e - 2) + t
					},
					easeInOutQuad: function(n, e, t, a, i) {
						return(e /= i / 2) < 1 ? a / 2 * e * e + t : -a / 2 * (--e * (e - 2) - 1) + t
					},
					easeInCubic: function(n, e, t, a, i) {
						return a * (e /= i) * e * e + t
					},
					easeOutCubic: function(n, e, t, a, i) {
						return a * ((e = e / i - 1) * e * e + 1) + t
					},
					easeInOutCubic: function(n, e, t, a, i) {
						return(e /= i / 2) < 1 ? a / 2 * e * e * e + t : a / 2 * ((e -= 2) * e * e + 2) + t
					},
					easeInQuart: function(n, e, t, a, i) {
						return a * (e /= i) * e * e * e + t
					},
					easeOutQuart: function(n, e, t, a, i) {
						return -a * ((e = e / i - 1) * e * e * e - 1) + t
					},
					easeInOutQuart: function(n, e, t, a, i) {
						return(e /= i / 2) < 1 ? a / 2 * e * e * e * e + t : -a / 2 * ((e -= 2) * e * e * e - 2) + t
					},
					easeInQuint: function(n, e, t, a, i) {
						return a * (e /= i) * e * e * e * e + t
					},
					easeOutQuint: function(n, e, t, a, i) {
						return a * ((e = e / i - 1) * e * e * e * e + 1) + t
					},
					easeInOutQuint: function(n, e, t, a, i) {
						return(e /= i / 2) < 1 ? a / 2 * e * e * e * e * e + t : a / 2 * ((e -= 2) * e * e * e * e + 2) + t
					},
					easeInSine: function(n, e, t, a, i) {
						return -a * Math.cos(e / i * (Math.PI / 2)) + a + t
					},
					easeOutSine: function(n, e, t, a, i) {
						return a * Math.sin(e / i * (Math.PI / 2)) + t
					},
					easeInOutSine: function(n, e, t, a, i) {
						return -a / 2 * (Math.cos(Math.PI * e / i) - 1) + t
					},
					easeInExpo: function(n, e, t, a, i) {
						return 0 == e ? t : a * Math.pow(2, 10 * (e / i - 1)) + t
					},
					easeOutExpo: function(n, e, t, a, i) {
						return e == i ? t + a : a * (-Math.pow(2, -10 * e / i) + 1) + t
					},
					easeInOutExpo: function(n, e, t, a, i) {
						return 0 == e ? t : e == i ? t + a : (e /= i / 2) < 1 ? a / 2 * Math.pow(2, 10 * (e - 1)) + t : a / 2 * (-Math.pow(2, -10 * --e) + 2) + t
					},
					easeInCirc: function(n, e, t, a, i) {
						return -a * (Math.sqrt(1 - (e /= i) * e) - 1) + t
					},
					easeOutCirc: function(n, e, t, a, i) {
						return a * Math.sqrt(1 - (e = e / i - 1) * e) + t
					},
					easeInOutCirc: function(n, e, t, a, i) {
						return(e /= i / 2) < 1 ? -a / 2 * (Math.sqrt(1 - e * e) - 1) + t : a / 2 * (Math.sqrt(1 - (e -= 2) * e) + 1) + t
					},
					easeInElastic: function(n, e, t, a, i) {
						var r = 1.70158,
							o = 0,
							s = a;
						if(0 == e) return t;
						if(1 == (e /= i)) return t + a;
						if(o || (o = .3 * i), s < Math.abs(a)) {
							s = a;
							var r = o / 4
						} else var r = o / (2 * Math.PI) * Math.asin(a / s);
						return -(s * Math.pow(2, 10 * (e -= 1)) * Math.sin((e * i - r) * (2 * Math.PI) / o)) + t
					},
					easeOutElastic: function(n, e, t, a, i) {
						var r = 1.70158,
							o = 0,
							s = a;
						if(0 == e) return t;
						if(1 == (e /= i)) return t + a;
						if(o || (o = .3 * i), s < Math.abs(a)) {
							s = a;
							var r = o / 4
						} else var r = o / (2 * Math.PI) * Math.asin(a / s);
						return s * Math.pow(2, -10 * e) * Math.sin((e * i - r) * (2 * Math.PI) / o) + a + t
					},
					easeInOutElastic: function(n, e, t, a, i) {
						var r = 1.70158,
							o = 0,
							s = a;
						if(0 == e) return t;
						if(2 == (e /= i / 2)) return t + a;
						if(o || (o = i * (.3 * 1.5)), s < Math.abs(a)) {
							s = a;
							var r = o / 4
						} else var r = o / (2 * Math.PI) * Math.asin(a / s);
						return e < 1 ? -.5 * (s * Math.pow(2, 10 * (e -= 1)) * Math.sin((e * i - r) * (2 * Math.PI) / o)) + t : s * Math.pow(2, -10 * (e -= 1)) * Math.sin((e * i - r) * (2 * Math.PI) / o) * .5 + a + t
					},
					easeInBack: function(n, e, t, a, i, r) {
						return void 0 == r && (r = 1.70158), a * (e /= i) * e * ((r + 1) * e - r) + t
					},
					easeOutBack: function(n, e, t, a, i, r) {
						return void 0 == r && (r = 1.70158), a * ((e = e / i - 1) * e * ((r + 1) * e + r) + 1) + t
					},
					easeInOutBack: function(n, e, t, a, i, r) {
						return void 0 == r && (r = 1.70158), (e /= i / 2) < 1 ? a / 2 * (e * e * (((r *= 1.525) + 1) * e - r)) + t : a / 2 * ((e -= 2) * e * (((r *= 1.525) + 1) * e + r) + 2) + t
					},
					easeInBounce: function(n, e, t, a, i) {
						return a - jQuery.easing.easeOutBounce(n, i - e, 0, a, i) + t
					},
					easeOutBounce: function(n, e, t, a, i) {
						return(e /= i) < 1 / 2.75 ? a * (7.5625 * e * e) + t : e < 2 / 2.75 ? a * (7.5625 * (e -= 1.5 / 2.75) * e + .75) + t : e < 2.5 / 2.75 ? a * (7.5625 * (e -= 2.25 / 2.75) * e + .9375) + t : a * (7.5625 * (e -= 2.625 / 2.75) * e + .984375) + t
					},
					easeInOutBounce: function(n, e, t, a, i) {
						return e < i / 2 ? .5 * jQuery.easing.easeInBounce(n, 2 * e, 0, a, i) + t : .5 * jQuery.easing.easeOutBounce(n, 2 * e - i, 0, a, i) + .5 * a + t
					}
				}), window.after = function(n, e) {
					return setTimeout(e, n)
				}, window.evil || (window.evil = {}), evil.win = $(window), evil.doc = $(document), evil.body = null, evil.doc.ready(function() {
					evil.body = $("body")
				}),
				function() {
					var n = !1;
					evil.transform3d = {
						check: function() {
							if("undefined" != typeof n) return n;
							var n = "undefined" != typeof evil.body.css("perspective"),
								e = document.body;
							return n && "undefined" != typeof e.webkitPerspective && (n = matchMedia("(transform-3d), (-webkit-transform-3d)"), n = n.matches), n
						},
						init: function() {
							n || (n = !0, evil.doc.ready(function() {
								var n = evil.transform3d.check() ? "3d" : "2d";
								evil.body.addClass("transform-" + n)
							}))
						}
					}
				}(), evil.transform3d.init(),
				function() {
					evil.doc.ready(function(n) {
						var e, t, a, i, r, o, s, u, c, f, l, d, h, p, m, g, v, w, M, y, C, I;
						return c = n(".easings li"), s = n(".easing-description"), e = null, f = function(n) {
							var e;
							return e = evil.win.scrollTop(), document.location.hash = n, evil.win.scrollTop(e)
						}, m = function(e, t) {
							return n("html, body").animate({
								scrollTop: e
							}, 600, t)
						}, n('a[href^="#"]').click(function() {
							return f(n(this).attr("href")), !1
						}), c.find(".easing-title").mousedown(function() {
							return n(this).closest(".easing").removeClass("is-clickable")
						}), c.find(".easing-title").mouseup(function() {
							return n(this).closest(".easing").addClass("is-clickable")
						}), c.on("touchstart", function() {
							return n(this).addClass("is-tapped")
						}), c.mouseenter(function() {
							var e, t;
							if(e = n(this), !e.hasClass("is-tapped")) return c.removeClass("is-tapped"), t = e.find(".easing-title").text(), e.find(".example").stop().css({
								marginTop: 0
							}).delay(400).animate({
								marginTop: -60
							}, 1e3, t), e.find(".dot").stop().css({
								marginTop: 0,
								marginLeft: 0
							}).delay(400).animate({
								marginTop: -60,
								marginLeft: 119
							}, {
								duration: 1e3,
								specialEasing: {
									marginTop: t,
									marginLeft: "linear"
								}
							})
						}), g = n(".easings"), I = g.find(".part-title"), I.mouseenter(function() {
							return g.addClass("hightlight-part")
						}), I.mouseleave(function() {
							return g.removeClass("hightlight-part")
						}), a = function(n) {
							if(!n.hasClass("exampled")) return n.find(".example").stop().css({
								marginTop: 0
							}), n.find(".dot").stop().css({
								marginTop: 0,
								marginLeft: 0
							})
						}, v = function(n) {
							var e;
							if(!n.hasClass("exampled")) return e = n.find("h2").text(), n.addClass("exampled"), after(400, function() {
								return n.find(".example").animate({
									marginTop: -78
								}, 1e3, e), n.find(".dot").animate({
									marginTop: -78,
									marginLeft: 154
								}, {
									duration: 1e3,
									specialEasing: {
										marginTop: e,
										marginLeft: "linear"
									},
									complete: function() {
										return after(400, function() {
											return n.removeClass("exampled")
										})
									}
								})
							})
						}, s.on("open", function() {
							return v(n(this))
						}), s.on("close", function() {
							return a(n(this))
						}), s.find(".graph").on("mouseenter click", function() {
							var e;
							return e = n(this).closest(".easing-description"), a(e), v(e)
						}), u = n(".easing-description"), M = n(".slide-slider"), l = null, h = !1, w = function() {
							var n, t;
							if("#" === location.hash || "" === location.hash) {
								if(!h) return;
								return evil.body.removeClass("easing-page"), after(600, function() {
									if(null != l && l.trigger("close"), e) return m(e)
								})
							}
							return n = location.hash.slice(1), u.hide(), l = u.filter("." + n).show(), evil.body.addClass("easing-page"), h ? (e = evil.win.scrollTop(), t = l.offset().top + 10, after(600, function() {
								return e > t ? m(t, function() {
									return l.trigger("open")
								}) : l.trigger("open")
							})) : after(800, function() {
								return l.trigger("open")
							})
						}, w(), evil.win.on("hashchange", w), after(1, function() {
							return h = !0, evil.body.addClass("page-animation")
						}), evil.win.on("keyup", function(n) {
							if(27 === n.keyCode) return location.hash = ""
						}), i = n(".open-source"), d = function(n) {
							return n.replace(/-[^-]+$/, "")
						}, p = d(n("html").attr("lang")), C = d(navigator.language || navigator.userLanguage), p !== C && i.addClass("user-can-translate"), r = !1, o = function() {
							var n, e, t, a, o, s;
							if(!(evil.win.width() < 600)) return r = !0, evil.win.off("resize.corner"), evil.body.hasClass("transform-3d") ? (a = i.find(".shadow"), t = i.find(".rotator"), n = t.css("transition-duration"), n = 1e3 * parseFloat(n), o = function() {
								return a.is(":animated") ? a.stop(!0).animate({
									opacity: 0
								}, n / 2, "easeOutQuart") : a.animate({
									opacity: 1
								}, n / 2, "easeInQuart").animate({
									opacity: 0
								}, n / 2, "easeOutQuart")
							}, s = function() {
								return i.addClass("show"), o()
							}, e = function() {
								return i.removeClass("show tappable"), o()
							}) : (s = function() {
								return i.addClass("show")
							}, e = function() {
								return i.removeClass("show tappable")
							}), i.mouseenter(s), i.mouseleave(e), i.find(".crop").on("touchend", function() {
								return i.hasClass("show") ? e() : (s(), i.addClass("tappable")), !1
							})
						}, o(), r || evil.win.on("resize.corner", o), y = n(".star"), evil.body.width() > 430 && evil.win.load(function() {
							return y.html(y.text()).addClass("is-enable"), y.find("iframe").on("load", function() {
								return y.addClass("is-show")
							}), after(5e3, function() {
								return y.addClass("is-show")
							})
						}), t = n("<select />").insertAfter("footer ul").change(function() {
							return location.href = n(this).val() + location.hash
						}), n("footer li").each(function() {
							var e, a, i;
							return a = n(this).find("a, span"), e = a.attr("href") || location.pathname, i = n("<option />").attr({
								value: e
							}).text(a.text()), a.is("span") && i.attr({
								selected: !0
							}), i.appendTo(t)
						}), n("footer ul").hide()
					})
				}.call(this);
		</script>
		
	</body>

</html>